判断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 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 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
jQuery DOM操作小结与实例
Jan 07 #Javascript
You might like
各种战术和打法的原创者
2020/03/04 星际争霸
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
javascript动画效果类封装代码
2007/08/28 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
React优化子组件render的使用
2019/05/12 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
浅谈Python 的枚举 Enum
2017/06/12 Python
python下载图片实现方法(超简单)
2017/07/21 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
python保留小数位的三种实现方法
2020/01/07 Python
Opencv求取连通区域重心实例
2020/06/04 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
梅西百货官网:Macy’s
2020/08/04 全球购物
让生命充满爱演讲稿
2014/05/10 职场文书
项目负责人任命书
2014/06/04 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python