判断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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
angular 组件通信的几种实现方式
Jul 13 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
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
PHP生成sitemap.xml地图函数
2013/11/13 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
MIS软件工程师的面试题
2016/04/22 面试题
保护环境的标语
2014/06/09 职场文书
科技活动周标语
2014/10/08 职场文书
建筑工程催款函
2015/06/24 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
如何在Python中创建二叉树
2021/03/30 Python
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis