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


Posted in Javascript onOctober 26, 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 = "http://sc.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实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 #Javascript
基于jquery的给文章加入关键字链接
Oct 26 #Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 #Javascript
自写的一个jQuery圆角插件
Oct 26 #Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 #Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 #Javascript
jquery ui resizable bug解决方法
Oct 26 #Javascript
You might like
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
js加解密 脚本解密
2008/02/22 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
python+Django+apache的配置方法详解
2016/06/01 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python3 模块、包调用&路径详解
2017/10/25 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
用python实现百度翻译的示例代码
2018/03/09 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python装饰器常见使用方法分析
2019/06/26 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
找工作最新求职信
2013/12/22 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
健康证明
2015/06/19 职场文书
工作简报格式范文
2015/07/21 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL