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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
深入理解javascript变量声明
Nov 20 Javascript
javascript计时器详解
Feb 28 Javascript
javascript封装简单实现方法
Aug 11 Javascript
学习jQuey中的return false
Dec 18 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
vue计算属性及使用详解
Apr 02 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
判断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中看实例学正则表达式
2006/12/25 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
jQuery取id有.的值的方法
2014/05/21 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
大学生简历中个人的自我评价
2013/10/06 职场文书
项目考察欢迎辞
2014/01/17 职场文书
求职意向书范文
2014/04/01 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
聘任证明怎么写
2015/03/02 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript