基于JS判断iframe是否加载成功的方法(多种浏览器)
作者:mrr 时间:2023-08-24 04:14:52
推荐阅读:
JS iFrame加载慢怎么解决
在项目中经常要动态添加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是否加载成功的方法,希望对大家有所帮助!
标签:js,iframe,加载


猜你喜欢
python3基于OpenCV实现证件照背景替换
2022-06-08 02:16:53
商业价值与用户价值的平衡
2008-12-10 18:42:00

Django+Ajax+jQuery实现网页动态更新的实例
2023-02-11 03:23:19
ORACLE中查找定位表最后DML操作的时间小结
2024-01-28 04:41:00

vue keep-alive的简单总结
2024-04-28 10:55:32
mysqldump你可能不知道的参数
2024-01-28 13:55:49
Python实现猜拳与猜数字游戏的方法详解
2022-06-17 18:32:25

MySql 8.0.11安装配置教程
2024-01-18 23:41:46

Oracle客户端 NLS_LANG 的设置方法
2012-07-11 15:55:27
用户是如何浏览你的网站的
2010-05-03 14:26:00

解决Pyinstaller打包软件失败的一个坑
2022-05-31 21:47:14
JavaScript学习笔记之函数记忆
2024-04-16 09:27:01
Django生成数据库及添加用户报错解决方案
2024-01-28 22:40:00
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2021-06-03 17:02:32
Oracle 自增(auto increment) 或 标识字段的建立方法
2009-03-06 11:15:00
仿6room网站图片链接效果
2007-06-21 13:59:00

Pyecharts绘制可视化地球实现示例
2021-03-18 17:18:48

thinkPHP框架实现类似java过滤器的简单方法示例
2023-11-22 12:24:47
python实现selenium截图的两种方法
2023-08-16 06:26:57
Pandas高级教程之Pandas中的GroupBy操作
2022-04-14 19:22:25