js下判断 iframe 是否加载完成的完美方法
更新时间：2010年10月26日 13:43:44 作者：
一般来说，我们判断 iframe 是否加载完成其实与 判断JavaScript 文件是否加载完成。
采用的方法很类似：
var iframe = document.createElement("iframe");
iframe.src = "https://www.jb51.net";
if (!/*@cc_on!@*/0) { //if not IE
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
} else {
iframe.onreadystatechange = function(){
if (iframe.readyState == "complete"){
alert("Local iframe is now loaded.");
}
};
}
document.body.appendChild(iframe);
最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：
var iframe = document.createElement("iframe");
iframe.src = "http://sc.jb51.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);
几点补充说明：
IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。
复制代码 代码如下:
var iframe = document.createElement("iframe");
iframe.src = "https://www.jb51.net";
if (!/*@cc_on!@*/0) { //if not IE
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
} else {
iframe.onreadystatechange = function(){
if (iframe.readyState == "complete"){
alert("Local iframe is now loaded.");
}
};
}
document.body.appendChild(iframe);
最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：
复制代码 代码如下:
var iframe = document.createElement("iframe");
iframe.src = "http://sc.jb51.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);
几点补充说明：
IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了如何通过JavaScript前端实现拼图分割效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-10-10
JavaScript检测字符串中是否含有html标签实现方法
这篇文章主要介绍了JavaScript检测字符串中是否含有html标签实现方法,本文直接给出实现代码,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了微信小程序入门之广告条实现方法,涉及微信小程序基于swiper与navigator组件的文字信息滑动展示相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要给大家介绍了关于webpack如何自动生成网站图标的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
当下最流行的前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢，你如果也喜欢Bootstrap前端开发框架，不要错过这次旅行2016-05-05
这篇文章主要介绍了JavaScript forEach()遍历函数使用及介绍,本文讲解了使用forEach遍历数组的用法以及提前终止循环的一个方法技巧,需要的朋友可以参考下2015-07-07
在JavaScript中,可以通过值和引用传递,两者之间的主要区别是,按值传递发生在赋值基本类型的时候,而赋值对象时按引用传递,下面这篇文章主要给大家介绍了关于JS中"值传递"和"引用传递"的相关资料,需要的朋友可以参考下2022-05-05
基于javascript实现浏览器滚动条快到底部时自动加载数据
这篇文章主要介绍了基于javascript实现浏览器滚动条快到底部时自动加载数据的相关资料,需要的朋友可以参考下2015-11-11
ES6标准新增了一种新的函数：Arrow Function（箭头函数）,为什么叫Arrow Function？因为它的定义用的就是一个箭头2020-05-05
移动端的开发过程中，免不了要判断横竖屏，然后在执行其他操作，比如分别加载不同样式，横屏显示某些内容，竖屏显示其他内容等等。2016-05-05
最新评论