检测到iFrame已加载后或3秒超时后调用函数

Question

I want to load a external URL in a hidden iframe on my web page. I need to detect once the external URL has finished loading, and then call my Function MyFunct(). If the external URL takes longer than 3 seconds to load I need to timeout and call MyFunct()

Will the following code call my function MyFunct() either once the iframe has loaded or after 3 seconds because of the timeout ?

var iframe = document.getElementById('MyFrame');
iframe.src = "SomeRandonUrl";

iframe.onload = function () {
   setTimeout(MyFunct, 3000);
}

Answer 1

You should check if it has loaded in a timeout event like the following.

var iframe = document.getElementById('MyFrame');
iframe.src = "SomeRandonUrl";

iframe.onload = function () {
    if (iframe.src !== "about:blank")
        iframe.loaded = true; // set that it has loaded if not about:blank
}

setTimeout(function() {
    if (!iframe.loaded) { // if undefined or false valued
        alert('Timedout');
        // and then you can cancel it's loading setting another src for e.g
    }
}, 3000);