跨浏览器的iframe onload 事件监听

以你之姓@ 2022-07-13 16:23 208阅读 0赞

[http://hi.baidu.com/wyw5257/blog/item/fbe152cb8e7a8614be09e617.html][http_hi.baidu.com_wyw5257_blog_item_fbe152cb8e7a8614be09e617.html]

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 使用定时器**

**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][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.οnlοad=function\{ window.parent.iframeCall();\}  
</script>

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

window.parent.callFunciton()。

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

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

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

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

#### 1.2 异域 ####

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

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

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

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

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

### 2. iframe onload 事件 ###

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

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

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

### **3.IFRAME ****递归** ###

在处理IFRAME时，浏览器应该有一个基本规则，那就是防止递归，防止页面无限的自我加载，使客户端设备崩溃。事实上，文中出现的几个浏览器均做到这点，只是不同的浏览器有不同的处理方式。请分别尝试以下代码：  
<iframe src=”” οnlοad=”finish()” name=”iframe1”></iframe>  
<iframe src=”\#hashonly” οnlοad=”finish()” name=”iframe2”></iframe>  
<iframe src=”?search” οnlοad=”finish()” name=”iframe3”></iframe>  
<iframe src=”http://anotherPage.com” οnlοad=”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.1****．****Firefox/Opera/Safari****，直接使用****iframe**** ****onload****事件** ####

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

#### **4.2****．****在IE下****，定时器测document.readyState或者注册iframe ****onreadystatechange事件** ####

**4.2.1****．****定时器以及document.readyState**

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

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

<table style="width: 453px;"> 
 <tbody> 
  <tr> 
   <td>uninitialized</td> 
   <td>对象未初始化.</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>对象正在加载数据.</td> 
  </tr> 
  <tr> 
   <td>loaded</td> 
   <td>对象已加载完数据.</td> 
  </tr> 
  <tr> 
   <td>interactive</td> 
   <td>在这个状态下，用户可以参与互动，即使在对象未加载完毕也可以</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>对象已完成初始化.</td> 
  </tr> 
 </tbody> 
</table>

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

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

**4.2.2.onreadystatechange 事件三步曲**

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

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

[http_hi.baidu.com_wyw5257_blog_item_fbe152cb8e7a8614be09e617.html]: http://hi.baidu.com/wyw5257/blog/item/fbe152cb8e7a8614be09e617.html
[http_yr.hk_article.asp_id_993]: http://yr.hk/article.asp?id=993
[Q239638]: http://support.microsoft.com/default.aspx?scid=KB;en-us;q239638
[Q188763]: http://support.microsoft.com/kb/188763/EN-US/