基于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 跳出页面的frameset框架示例介绍
Dec 23 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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中对数据库操作的封装
2006/10/09 PHP
Phpbean路由转发的php代码
2008/01/10 PHP
PHP使用递归生成文章树
2015/04/21 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
深入浅析Python传值与传址
2018/07/10 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
python中update的基本使用方法详解
2019/07/17 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
WSDL的操作类型主要有几种
2013/07/19 面试题
秘书专业自荐信范文
2013/12/26 职场文书
国际会议邀请函范文
2014/01/16 职场文书
电话营销开场白
2015/05/29 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
《山中访友》教学反思
2016/02/24 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android