javascript 判断 iframe是否加载成功

iframe加载监测

最新推荐文章于 2017-11-16 10:13:06 发布

转载最新推荐文章于 2017-11-16 10:13:06 发布 · 2.7k 阅读

文章标签：

#iframe #javascript #function #firefox #opera #chrome

js 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在不同浏览器中监测iframe的内容加载状态。对于IE浏览器，通过使用onreadystatechange事件结合readyState属性来判断；而对于非IE浏览器，则利用onload事件实现。文章还特别提醒了在动态创建iframe及静态iframe情况下需要注意的问题。

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);
	//这里是回调函数
   }
});

在其他非IE的浏览器上 Firefox,Opera,chrome等 iframe 都会拥有一个 onload 事件，此事件只要触发就说名内容已经加载完毕。

    iframe.addEventListener( "load", function(){
         //代码能执行到这里说明已经载入成功完毕了
      this.removeEventListener( "load", arguments.call, false);
         //这里是回调函数
   }, false);

注意：1.如果是动态创建的iframe,此函数必须放在 iframe 被appendChild到body，否则不会被触发
2.如果是静态的iframe 一般 onload 不会被触发，造成一样的原因是因为iframe加载太快导致，所以上述办法不适合。