基于JS判断iframe是否加载成功的方法(多种浏览器)

 更新时间:2016年05月13日 10:13:44   投稿:mrr  
这篇文章主要介绍了基于JS判断iframe是否加载成功的方法【多种浏览器】的相关资料,需要的朋友可以参考下

推荐阅读:

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是否加载成功的方法,希望对大家有所帮助!

相关文章

  • TypeScript 接口继承的具体使用

    TypeScript 接口继承的具体使用

    本文主要介绍了TypeScript 接口继承的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • javascript jquery对form元素的常见操作详解

    javascript jquery对form元素的常见操作详解

    下面小编就为大家带来一篇javascript jquery对form元素的常见操作详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 使用focus方法让光标默认停留在INPUT框

    使用focus方法让光标默认停留在INPUT框

    让光标默认停留在INPUT框中,用focus方法可以实现,下面有个示例代码,需要的朋友可以参考下
    2014-07-07
  • 微信公众平台获取access_token的方法步骤

    微信公众平台获取access_token的方法步骤

    这篇文章主要介绍了微信公众平台获取access_token的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Javascript实现快速排序(Quicksort)的算法详解

    Javascript实现快速排序(Quicksort)的算法详解

    排序算法(Sorting algorithm)是计算机科学最古老、最基本的课题之一,要想成为合格的程序员,就必须理解和掌握各种排序算法。
    2015-09-09
  • JavaScript中数组去重常用的五种方法详解

    JavaScript中数组去重常用的五种方法详解

    去重是开发中经常会碰到的一个热点问题,这篇文章主要介绍了JS中实现数组去重中常用的5个方法,文中的示例代码讲解详细,感兴趣的可以了解一下
    2022-06-06
  • JS+CSS实现表格高亮的方法

    JS+CSS实现表格高亮的方法

    这篇文章主要介绍了JS+CSS实现表格高亮的方法,可实现鼠标滑过表格高亮效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js精确的加减乘除实例

    js精确的加减乘除实例

    下面小编就为大家带来一篇js精确的加减乘除实例,具有非常好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • 基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例

    基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例

    这篇文章主要介绍了基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JavaScript基础知识及常用方法总结

    JavaScript基础知识及常用方法总结

    JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的,通过本篇文章给大家介绍javascript基础知识及常用方法总结,对js基础知识及常用方法相关知识感兴趣的朋友一起学习吧
    2016-01-01

最新评论