JavaScript-如何判断 iframe 是否加载完成

Question

如何判断 iframe 是否加载完成

Answer 1

 var iframe = document.createElement("iframe");iframe.src = "http://www.planabc.net";if (iframe.attachEvent){ iframe.attachEvent("onload", function(){ alert("Local iframe is now loaded."); });} else { iframe.onload = function(){ alert("Local iframe is now loaded."); };}document.body.appendChild(iframe);

Answer 2

分享一种方法：

var iframe = document.createElement("iframe");
iframe.src = "http://www.domain.com";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}
document.body.appendChild(iframe);

Answer 3

在WebApp的一种做法，不用考虑去兼容IE，使用zepto库

 var iframe = $('#iframe');
iframe.on('load', function(){
console.log('iframe is onload');
});

Answer 4

下面是一个是动态生成iframe来判断是否加载完成，一个是判定页面已存在的iframe：

//动态生成iframe判断
var iframe = document.createElement("iframe");
iframe.src = url;
if (!/*@cc_on!@*/0) { //if not IE
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
} else {
iframe.onreadystatechange = function(){//ie
if (iframe.readyState == "complete"){
alert("Local iframe is now loaded.");
}
};
}
document.body.appendChild(iframe);

//页面存在iframe
if(window.frames["iframeName"].document.readyState=="complete"){
alert("已经加载完毕");
}

Answer 5

可以通过iframe的onload方法或者是readystatechange 事件来实现，但是readystatechange 相对于 load 事件有一些潜在的问题。而且IE下的iframe的onload需要通过 attachEvent 来注册

具体看这个，有具体的介绍：

判断 iframe 是否加载完成的完美方法