基于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中if语句的几种优化代码写法
Mar 12 Javascript
js获取php变量的实现代码
Aug 10 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 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
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
python套接字流重定向实例汇总
2016/03/03 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
什么是Web Service?
2012/07/25 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
女方回门宴答谢词
2014/01/14 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
道德之星事迹材料
2014/05/03 职场文书
学习礼仪心得体会
2014/09/01 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
python字符串的多行输出的实例详解
2021/06/08 Python
Python中三种花式打印的示例详解
2022/03/19 Python
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python