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


Posted in Javascript onJanuary 07, 2010
var iframe = document.createElement("iframe"); 
iframe.src = "https://3water.com"; 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 = "https://3water.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);

几点补充说明:

IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册。
第二种方法比第一种方法更完美,因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

Javascript 相关文章推荐
Node.js中的流(Stream)介绍
Mar 30 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
Vue和Flask通信的实现
May 19 Vue.js
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 #Javascript
EXT中xtype的含义分析
Jan 07 #Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 #Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 #Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 #Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 #Javascript
jQuery DOM操作小结与实例
Jan 07 #Javascript
You might like
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
jQuery事件用法详解
2016/10/06 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
JavaScript函数定义方法实例详解
2019/03/05 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
Django migrate报错的解决方案
2021/05/20 Python