基于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 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
vue实现扫码功能
Jan 17 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
js实现移动端轮播图
2020/12/21 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python中的hypot()方法使用简介
2015/05/18 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Python发展简史 Python来历
2019/05/14 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
django使用graphql的实例
2020/09/02 Python
班主任工作年限证明
2014/01/12 职场文书
影子教师研修方案
2014/06/14 职场文书
美容院合作经营协议书
2014/10/10 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
员工评语范文
2014/12/31 职场文书
邀请函格式范文
2015/02/02 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL