基于JS判断iframe是否加载成功的方法(多种浏览器)


Posted in Javascript onMay 13, 2016

推荐阅读:

在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来。这时,我们就要考虑是否可以等iframe加载完后再执行后边的操作,当然,各种浏览器早就为我们考虑到啦,看下面:

ie浏览器

IE的每个elem节点都会拥有一个onreadystatechange事件,这个事件每次在elem内容发送变化的时候触发,比如内容正在载入loading会触发,内容载入完毕loaded会触发,内容载入成功complete会触发,这个函数还需要配合readyState,这是ie上每个elem都拥有的属性,用来查看每次触发时候的状态。

//先为iframe 添加一个 onreadystatechange
iframe.attachEvent("onreadystatechange", function(){
//此事件在内容没有被载入时候也会被触发,所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if(iframe.readyState === "complete" || iframe.readyState == "loaded"){
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent( "onreadystatechange", arguments.callee);
//这里是回调函数
}
});

其他浏览器(Firefox,Opera,chrome等 )

在其他非IE的浏览器上 Firefox,Opera,chrome等 iframe 都会拥有一个 onload 事件,此事件只要触发就说名内容已经加载完毕。

iframe.addEventListener( "load", function(){
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener( "load", arguments.call, false);
//这里是回调函数
}, false);

综合一下

if(iframe.attachEvent){
iframe.attachEvent("onreadystatechange", function() {
//此事件在内容没有被载入时候也会被触发,所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if (iframe.readyState === "complete" || iframe.readyState == "loaded") {
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent("onreadystatechange", arguments.callee);
//这里是回调函数
}
});
}else{
iframe.addEventListener("load", function() {
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener("load", arguments.call, false);
//这里是回调函数
}, false);
}

注意:上面的函数必须放在 iframe 被appendChild到body后,否则不会被触发

以上内容是小编给大家介绍的JS判断iframe是否加载成功的方法,希望对大家有所帮助!

Javascript 相关文章推荐
js实现文字在按钮上滚动的方法
Aug 20 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
JS iFrame加载慢怎么解决
May 13 #Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 #Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 #Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 #Javascript
最简单的tab切换实例代码
May 13 #Javascript
浅析创建javascript对象的方法
May 13 #Javascript
全面理解JavaScript中的闭包
May 12 #Javascript
You might like
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
python实现的文件同步服务器实例
2015/06/02 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
python时间time模块处理大全
2020/10/25 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
《愚公移山》教学反思
2014/02/20 职场文书
《学会合作》教学反思
2014/04/12 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
骨干教师个人总结
2015/02/11 职场文书
医院合作意向书范本
2015/05/08 职场文书
求职意向书范本
2015/05/11 职场文书
劳动模范获奖感言
2015/07/31 职场文书
Python实现拼音转换
2021/06/07 Python
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle