文档章节

【转】 跨浏览器的iframe onload 事件监听

山哥
 山哥
发布于 2011/09/19 09:21
字数 3181
阅读 918
收藏 1
From: http://hqlong.com/tag/iframe

经常会遇到这样一种情况。
在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快,或许我们感觉不到页面载入的不同步,但试想,如果一个需要内嵌到iframe 里的页面的响应很慢,这里会出现一种什么现象呢?这时将会出现所有页面已经载入完成,但在iframe元素处,将会出现空白,直到内嵌页面完成载入时,该 空白处才会显示新载入的页面。
可想而知,一个页面如果长时间的空白,对于浏览者来说将意味着什么。
如果在内嵌页面未载入完成时,给出一种加载提示信息。如:“页面加载中”之类的,我想这对浏览页面用户来讲,将不再是煎熬,更是一种视觉上的享受。
为了实现这样的效果,一般会采用如下原理处理。
·iframe载入区域给出友好的提示信息。
·当iframe载入完成时,清空提示信息,而让iframe显示。
这些都比较容易,但现在的问题的关键是怎么监听iframe元素内的页面已经载入完成。
关键这个问题,一般来讲,会分两种情况的来讨论解决方案。
·同域的嵌套。最好是让子页面调用父页面的方法。
·如果是异域,但子页面无法修改,那么:在Firefox/Opera/Safari中,可以直接使用iframe onload事件;而在IE中,可以通过定时器测定子页面的document.readyState,或者使用iframe onreadystatechange事件计算该事件的响应。
1.同域嵌套。
parent.html

function ifrmLoaded() {  // code here }

sub.html

window.onload = function() {  window.parent.ifrmLoaded();}

有时候,为了防止自己的页面不被别人嵌套,可以采用如下方式解决:

if(window.parent!=window) window.parent.location="http://hqlong.com";//or if(window.top!=window) window.top.location="http://hqlong.com";

2.嵌套页面不能修改,或者异域嵌套。
2.1 Firefox/Opera/Safari中直接使用iframe onload事件

document.getElementById('ifrm').onload = function() {  //here doc }

2.2 在IE下,定时器测document.readyState或者注册iframe onreadystatechange事件
2.2.1 使用定时器

var oFrm = document.getElementById('ifrm');var fmState=function(){  var state=null;
 if(document.readyState){   try{    state=oFrm.document.readyState;
  }catch(e){state=null;}   if(state=="complete" || !state) {    onComplete();
   return;
  }   window.setTimeout(fmState,10);
 } };//在改变src或者通过form target提交表单时,执行语句: if(fmState.TimeoutInt) window.clearTimeout(fmState.timeoutInt);
fmState.timeoutInt = window.setTimeout(fmState,400);

2.2.2 使用iframe onreadystatechange事件

var oFrm = document.getElementById('ifrm');
oFrm.onreadystatechange = function() {  if (this.readyState && this.readyState == 'complete') {   onComplete();
 } }

每当iframe加载页面,过程内会激活onreadystatechange事件三次,相应的状态分别是loading,interactive和complete,而最后一次才是complete.
3. 兼容Firefox/Opera/Safari/IE的处理方式。

var oFrm = document.getElementById('ifrm');
oFrm.onload = oFrm.onreadystatechange = function() {      if (this.readyState && this.readyState != 'complete') return;
     else {          onComplete();

     }

参考资料: http://yr.hk/article.asp?id=993




From: http://blog.guitarbean.com/2008/08/iframe-onload-event-monitoring.html

很多时候,我们会需要改变一个iframe的地址(src属性),或者使用表单(form)的target在指定的iframe进行提交后,在 iframe加载完毕(onload)时立即响应某个操作,以提高WEB应用程序的价值。本文讨论了跨浏览器的iframe onload事件的监听方法。

如果你没时间去阅读全文,可以看解决方案的内容概要:

  1. 同域的页面嵌套,最好的是让内嵌的页面调用父页面的函数,如 window.parent.callparentFunctoin()。
  2. 如果是异域,或者子页面已存在且无法修改,那么:在Firefox/Opera/Safari中,可以直接使用iframe onload事件;而在IE中,可以通过定时器测定子页面的document.readyState,或者使用iframe onreadystatechange事件计算该事件的响应次数。

以上内容基于参考文档: Q239638 和 Q188763.

如果你对这个话题很感兴趣,请一定要继续阅读哦。。。

注[1]:为了使问题更集中,本文所述的<iframe>均直接写在父页面中,对使用 document.createElement(“iframe”)或者其它方式建立的iframe不作讨论,因为这样会使问题在IE下变得更加复杂,但 只要使用本文的结论,无论何方式下建立的iframe,问题仍然会得到解决。

一个简单的包含iframe的父页面将是如下样子的:

<!DOCTYPE ...>
<html xmlns="...">
  <head>
  <meta ... />
  <title>Iframe</title>
  <body>
    <iframe name="iframe1"  id="iframe1" width="300" height="50" src="#" ></iframe>
    <script type="text/javascript">//codes here</script>
  </body>
</html>

开始:

让我们从一种简单的情形和解决方法开始:

1.window.parent 对象

1.1 调用父页面对象

<!–This is an inner page in the iframe–>
<script type=”text/javascript”>
window.onload=function{ window.parent.iframeCall();}
</script>

在网上找到的方法中,最令人开心的一个,莫过于在能子页面中调用父页面的对象了:

window.parent.callFunciton()。

不过我想:可能这点全地球人都已经知道了。只是这个方法有一个缺点,那就是子父页面必须在同域中。

还有一点,就是前端工程师们需对子页面有修改权;或者,可以请负责此子页面的同事为我们添加一段代码:

<script type=”text/javascript”>
if(window.parent!=window) window.parent.iframeCall();
</script>

把它放到window.onlad中,或者直接放在</body>之前。

注[2]:在对iframe或其它窗口性质的前端编程中,同域名是最完美的先天条件。只要在同一域名中,各个窗口间的对象是共享的,我们完全可以自由发挥,在不同的窗口间来回驾驭。总之,只有想不到,没有做不到。

1.2 异域

在不同域名的页面,浏览器出于安全考虑,几乎完全封锁了页面间的对象来往,这里没有鹊桥,牛郎和织女只能远远想望。当然,用iframe嵌套页面还是可以的,毕竟还可以思念。

面对家族的封锁,罗密欧还是很想见朱丽叶,他在夜里架起梯子抓到朱丽叶的窗前与她见面;在异域的页面嵌套中,子页面总是可以直接改变父窗口的location以防止被嵌套,但父页面对这个一点办法也没有。

当然,子页面除了仅仅永恒地拥有父窗口.location的修改权外,也没有其它了。例如,在IE下,子页面只能直接修改父页面的.location为另一个源:

<script tyle=”text/javascript”>parent.location=”http://anotherPage.com/”;</script>

但无法访问其它对象,如window.name,document等,连location.href等location的子属性就无法访问。当然,在防止嵌套方面,使用top.location会更强大。

但Firefox中,似乎还可以为top.location添加一些东西,但这是在我不严谨的测试中出现过的情况,未经找到相应的权威文档哦。

2. iframe onload 事件

在Firefox/Opera/Safari中,直接使用frame元素的onload事件即可:
document.getElementById(“iframe1”).onload=function(){
//your codes here.
};
只可惜它在IE下经常无效,因为在IE下它最多只能被激活一次,而且无论你有多少个iframe,被激活的也只能是最后一个的。更详细的描述请看:Q239638和 Q188763

原因
这些事件是在IFRAME内的文档对象模型中激活的,而不是父页面的。在IFRAME加载完毕的时候,这个事件就被激活了,而且ReadyState已经是“完成”状态。所以你无法通过这个事件来查检一个IFRAME是否加载完毕。

为了得到更好的表现,我们再稍稍研究一个问题:IFRAME递归。

3.IFRAME 递归

在处理IFRAME时,浏览器应该有一个基本规则,那就是防止递归,防止页面无限的自我加载,使客户端设备崩溃。事实上,文中出现的几个浏览器均做到这点,只是不同的浏览器有不同的处理方式。请分别尝试以下代码:
<iframe src=”” onload=”finish()” name=”iframe1”></iframe>
<iframe src=”#hashonly” onload=”finish()” name=”iframe2”></iframe>
<iframe src=”?search” onload=”finish()” name=”iframe3”></iframe>
<iframe src=”http://anotherPage.com” onload=”finish()” name=”iframe4”></iframe>
执行的结果是,在父页面加载时,上面的iframe onload函数在IE/Opera/Safari中均会被激活,Firefox对第二个没有反应。这主要因为他们在防止递归方面的处理是不同的。
对于#hashonly和?search这样的URL,浏览器会解释为页面本身。但hash和search的不同之处是,改变 search可以组成新的源,而改变hash不会。通常地,浏览器一遇到同源的iframe内页即会停止加载,但Safari却会加载多一次。
假如把finish()函数写成如下:
var finsh=function(){alert(”onload from :”+this.src);}
运行时分别弹出的消息弹出框的次数如下:

ifm/brw:    IE    |    Firefox    |    Opera    |    Safari
iframe1:    1     |       1       |      1      |      0
iframe2:    1     |       0       |      1      |      1
iframe3:    2     |       1       |      2      |      2

iframe4:    1     |       1       |      1      |      1

再结合页面所呈现的内容,可得看出这些浏览器在处理递归问题上的一些细则:

  • Firefox 不会在iframe中加载任何东西和激活onload事件(可能是任何事件)
  • IE和Opera不会在iframe中加载页面,但会激活onload事件。
  • Safari(windows版本)会在iframe中加载页面一次且仅仅一次,并会激活onlaod事件且仅激活依附在父页面上那个iframe的onload事件。

关于本节,如果仅把iframe用于页面嵌套,那意义不大;如果用于动态加载/呈现内页,或者用于良好用户体验的form target表单提交处理(不是Ajax),并且要求较高的浏览器兼容性时,作用才会显示出来。根据本节结果,为了提高兼容性,最好事先把iframe指 向一个空页面——blank.html,因为它在4种浏览器中的表现是一样的。如果不想事先加载页面,那就得花多点心思去判断浏览器类型了。

4.代码实现

4.1Firefox/Opera/Safari,直接使用iframe onload事件

document.getElementById(“iframe1”).onload=function(){     //your codes here. };

4.2在IE下,定时器测document.readyState或者注册iframe onreadystatechange事件

4.2.1定时器以及document.readyState

var fm1=window.frames["iframe1"]; var fmState=function(){   var state=null;   if(document.readyState){     try{       state=fm1.document.readyState;     }catch(e){state=null;}     if(state=="complete" || !state){//loading,interactive,complete       //onComplete();       return;     }     window.setTimeout(fmState,10);   } }; //在改变src或者通过form target提交表单时,执行语句: if(fmState.TimeoutInt) window.clearTimeout(fmState.timeoutInt); fmState.timeoutInt = window.setTimeout(fmState,400);

为什么要延时400毫秒?因为javascript对DOM的操作是异步的,我们必须等待脚本对DOM落实执行后才开始下一步。400秒这个数取决 与客户端的设备和浏览器的响应速度,好的设备的响应速度能在10毫秒以内甚至更快,但100毫秒左右可能比较大众化,400毫秒应该是十分保守的了。总 之,较大的毫秒数能适合更多的用户设备状况,并能减少了客户端设备的工作量。

至于document.readyState,指的是iframe内子页的docuent.readyState,而不是父页面的。只要允许,即在同域情况下,document.readyState会返回5个状态:

uninitialized 对象未初始化.
loading 对象正在加载数据.
loaded 对象已加载完数据.
interactive 在这个状态下,用户可以参与互动,即使在对象未加载完毕也可以
complete 对象已完成初始化.

为什么使用try和 catch?因为在异域的情况下,当iframe的子页到达interactive状态时,父页面就会失去访问权,所以最多只能返回到loaded这一步,因此IE出一个未知错误——其实就是没有权限,所以try和catch,让这个错误沉默下去。

幸好这个方法只针对IE(目前我能使用到的版本:IE6/7),否则麻烦大了:Opera不等页面加载完就开始交互了,而IE会等页面加载完毕才进行交互,所以感觉用Opera打开网页的速度相对比IE快。

4.2.2.onreadystatechange 事件三步曲

var stateID={}; var fmStChange=function(){   if(ifFirstLoad) return;   stateID[this.id]=stateID[this.id] ? stateID[this.id]+1:1;   switch (stateID[this.id]){     case 1:       //state loading       //onComplete(STEP1);       break;     case 2:       //state interactive       //onComplete(STEP2);       break;     case 3:       //state complete       //onComplete(LASTSTEP);       break;   }   if(stateID[this.id]&gt;=3) stateID[this.id]=null; }; $("iframe1").onreadystatechange=fmStChange; //if you want to ignore the parent page load //add the following two line var ifFirstLoad=true; $("iframe1").onload=function(){ifFirstLoad=false;}

每当iframe加载页面,过程内会激活onreadystatechange事件三次,相应的状态分别是loading,interactive和complete,而最后一次才是complete,所以我们得计算一下,直到第三次才算是完成。

注意:这个方案中的stateID在状态判断时非常重要,要进行必要的修正和保护,如在每次应用iframe 时,把stateID[iframe_id]复位为null,或者在第三次响应完成之前,不要对iframe进行新轮页面加载,或者在新一轮的页面加载前 消除之前的事件并复位。

© 著作权归作者所有

山哥

山哥

粉丝 248
博文 355
码字总数 136865
作品 0
南京
程序员
私信 提问
【翻译】Iframe, onload 与 document.domain

原文链接:http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/ 译者:Demix 在web2.0的时代,越来越多的人开始关注使用iframe将第三方网站的内容嵌入自己的网站中...

山哥
2011/09/19
206
0
window.name实现的跨域数据传输

这篇文章是对 JavaScript跨域总结与解决办法 的补充。 有三个页面: a.com/app.html:应用页面。 a.com/proxy.html:代理文件,一般是一个没有任何内容的html文件,需要和应用页面在同一域下...

李朝强
2014/09/24
67
0
【转】js之iframe子页面与父页面通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同。 一、同域下父子页面的通信 父页面parent.html <html><head> </head><body> </body></html> 子页面c......

北京d路飞
2016/06/16
90
0
window.postMessage

HTML5 跨域通信 API - window.postMessage 参考 MDN - Window.postMessage() Syntax otherWindow.postMessage(message, targetOrigin, [transfer]) message 你要发送的信息(字符串和对象都可......

SKYCOBS
2016/09/14
15
0
JavaScript多种跨域方式

JSONP方式 这种方法即引入不同源的脚本,该脚本载入后会调用全局的某个方法的,所以只要本页面提供该方法给它调用即可,从而达到跨域的目的。具体应用有jQuery.ajax的jsonp调用,也有script标...

前端届的科比
2015/09/05
92
0

没有更多内容

加载失败,请刷新页面

加载更多

《Java并发编程的艺术》第二章--2.2--synchronized的实现原理与应用

在多线程并发编程中synchronized一直是元老级角色,很多人都会称呼它为重量级锁。但 是,随着Java SE 1.6对synchronized进行了各种优化之后,有些情况下它就并不那么重了 Java中的每一个对象...

我是警察叔叔
8分钟前
2
0
常见排序算法及对应的时间复杂度和空间复杂度

本人免费整理了Java高级资料,涵盖了Java、Redis、MongoDB、MySQL、Zookeeper、Spring Cloud、Dubbo高并发分布式等教程,一共30G,需要自己领取。 传送门:https://mp.weixin.qq.com/s/Jzdd...

李红欧巴
12分钟前
1
0
时间和空间的完美统一!阿里云时空数据库正式商业化

经过一段时间公测,得到广大客户的热烈支持,阿里云时空数据库已经于2019年9月10日正式商业化售卖! 产品介绍 时空数据库能够存储、管理包括时间序列以及空间地理位置相关的数据。我们的社会...

阿里云官方博客
16分钟前
1
0
什么是公有云、私有云和混合云云桌面,看完后涨知识了

前不久听到有用户在抱怨说“我就想部署个云桌面而已,怎么还有公有云、私有云和混合云这么个说法的,搞得我都混淆了”,那么到底什么是公有云、私有云和混合云云桌面的呢,他们的优缺点又是怎...

GZASD
19分钟前
1
0
6 个 K8s 日志系统建设中的典型问题,你遇到过几个?

导读:随着 K8s 不断更新迭代,使用 K8s 日志系统建设的开发者,逐渐遇到了各种复杂的问题和挑战。本篇文章中,作者结合自己多年经验,分析 K8s 日志系统建设难点,期待为读者提供有益参考。...

大涛学长
20分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部