iframe父頁面和子頁面相互調用的方法


隨着W3C一聲令下,幾年前使用非常頻繁的frameset + frame已完成使命,光榮退伍。作為frameset的替代方案(姑且這么稱吧),iframe的使用也多了起來。較frameset方案,iframe在使用上更加靈活,文檔結構更加友好。

本文就js操作iframe在不同瀏覽器(沒錯,又是瀏覽器兼容…)的差異性做一些說明,力求總結出一個適應於所有主流瀏覽器的方案,筆者只測試了IE 6/7/8(以下簡稱IE)和FireFox 5.0(以下簡稱FF)。

約定與定義

iframeElement:指的是iframe的DOM元素表示,即用document.getElemenetById()等方法獲取的DOM對象
iframeId: 指iframe的屬性id,如<iframe id=”someid”>
iframeName:指iframe的屬性name,如<iframe name=”somename”>
iframeIndex:從0開始編號的iframe索引,若頁面中有N個frame,則其值范圍為0 – n-1
iframeWindow:指的是iframe的window對象
標准瀏覽器:符合W3C標准的瀏覽器的統稱,如FireFox

一、 在父頁面中獲取iframe的window對象

獲得了window對象后,就可以調用iframe頁面中定義的方法等。

IE:可以通過iframeId、window.iframeId、window.iframeName、window.frames[iframeId]、window.frames[iframeName]、window.frames[iframeIndex]和iframeElement.contentWindow這6種方法來獲取iframe的window對象。

FF:可以通過window.iframeName、window.frames[iframeName]和iframeElement.contentWindow這3種方法獲取window對象。

總結:為了兼容大多數瀏覽器,應使用iframeElement.contentWindow來獲取。見如下代碼:

[html] view plain copy
  1. <iframe id="iframe1" name=”iframe1” src="frame1.html"></iframe>  
  2.   
  3. <script type="text/javascript">  
  4.     //獲取iframe的window對象  
  5.     var iframe = document.getElementById('iframe1').contentWindow;  
  6. </script>  

二、 在父頁面中獲取iframe的document對象

標准瀏覽器可以通過iframeElement.contentDocument來引用iframe的doument對象,但是IE瀏覽器(又是這斯…)不支持,確切說應該是IE 6/7,筆者發現在IE8中已經可以用此方法來獲取了。

當然,因為document是window的一個子對象,你也可以先獲取iframe的window對象,再通過window.document來引用。

總結:應使用以下兩方法來獲取,見代碼:

[html] view plain copy
  1. <iframe id="iframe1" src="frame1.html"></iframe>  
  2.   
  3. <script type="text/javascript">  
  4.     //獲取iframe的document對象         
  5.     //方法1  
  6.     var iframe = document.getElementById('iframe1').contentWindow.document;  
  7.   
  8.     //方法2  
  9.     function getIframeDom(iframeId) {  
  10.         return document.getElementById(iframeId).contentDocument || window.frames[iframeId].document;  
  11.     }  
  12. </script>  

 

三、 iframe頁面獲取父頁面的window對象

parent:父頁面window對象

top:頂層頁面window對象

self:始終指向當前頁面的window對象(與window等價)

適用於所有瀏覽器,當拿到了父頁面的window對象后,就可以訪問父頁面定義的全局變量和函數,這在iframe交互里經常用到。

后記

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM