IE iframe的onload方法分析小结


Posted in Javascript onJanuary 07, 2010

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

这里感觉说的并不是完全准确,开始给我造成了很大的困扰。看其代码才明白,真正意义上来讲IE在创建一个新的iframe时的onload方法需要使用attachEvent来绑定,而原来就存在的iframe的onload方法,则可以直接绑定。

说的有些乱,大家看代码,一看便知:

<iframe id='google'></iframe> 
<script type='text/javascript'> 
document.getElementById('google').src='http://3water.com/'; 
document.getElementById('google').onload = function(){ 
alert ('I am google frame, now loaded'); 
} 
</script>

在这里,也把原文提到的”判断 iframe 是否加载完成的完美方法”原文摘录至此
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);
Javascript 相关文章推荐
javascript天然的迭代器
Oct 29 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
判断iframe是否加载完成的完美方法
Jan 07 #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
You might like
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
js的一些常用方法小结
2011/06/29 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
详解参数传递四种形式
2015/07/21 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python3.x中自定义比较函数
2015/04/24 Python
python实现顺序表的简单代码
2018/09/28 Python
python机器人运动范围问题的解答
2019/04/29 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Python线程指南分享
2019/11/19 Python
化工专业大学生职业生涯规划书
2014/01/14 职场文书
食品安全演讲稿
2014/09/01 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS