基于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 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
vue如何在data中引入图片的正确路径
Jun 05 Vue.js
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学习教程之第1天
2008/06/15 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php设计模式之单例模式代码
2016/06/11 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
实例说明Python中比较运算符的使用
2015/05/13 Python
20个常用Python运维库和模块
2018/02/12 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
幼师专业求职推荐信
2013/11/08 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
我的画教学反思
2014/04/28 职场文书
求职信范文大全
2014/05/26 职场文书
民生工作实施方案
2014/05/31 职场文书
实习生矿工检讨书
2014/10/13 职场文书
新员工考核评语
2014/12/31 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
民事代理词范文
2015/05/25 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
求职信如何撰写?
2019/05/22 职场文书
python 离散点图画法的实现
2022/04/01 Python
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL