判断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 相关文章推荐
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 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
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
JS焦点图切换,上下翻转
2011/05/12 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
JS实现分页导航效果
2020/02/19 Javascript
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
Django开发中复选框用法示例
2018/03/20 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python 绘制国旗的示例
2020/09/27 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
浅谈react路由传参的几种方式
2021/03/23 Javascript
学校安全教育制度
2014/01/31 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
财务部绩效考核方案
2014/05/04 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
新郎新娘答谢词
2015/01/04 职场文书
公司感谢信范文
2015/01/22 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python