判断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 相关文章推荐
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
antd form表单数据回显操作
Nov 02 Javascript
解决vuex刷新数据消失问题
Nov 12 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
咖啡的化学
2021/03/03 咖啡文化
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
4.与数据库的连接
2006/10/09 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
python 爬虫请求模块requests详解
2020/12/04 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
金融学专科生自我鉴定
2014/02/21 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
亲子活动总结
2014/04/26 职场文书
招股说明书范本
2014/05/06 职场文书
社区春季防火方案
2014/06/02 职场文书
2014年采购工作总结
2014/11/20 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书