javascript操作iframe詳解

antzone發表於2017-03-17
JavaScript

iframe元素在當前還是比較常用的，有時候使用iframe更容易實現想要的功能，那麼在父視窗中操作iframe中的元素或者在iframe中操作父視窗的元素往往是不可避免的，下面就介紹一下使用js如何進行相互操作。

一.開始前的預備:

1.父頁面中的程式碼:

[HTML] 純文字檢視 複製程式碼
<body>
<div id="thediv">父頁面的內容</div>
<iframe src="iframe.html" id="iframe" name="iframename"></iframe>
</body>

2.iframe頁面中的程式碼:

[HTML] 純文字檢視 複製程式碼
<body>
<div id="framediv">子頁面中的內容</div>
</body>

二.知識點提前介紹:

很多初學者可能感覺以下兩段程式碼的作用相同:

[JavaScript] 純文字檢視 複製程式碼
var obj=document.getElementById("iframe"); 
var obj=window.frames[0];

以上兩段程式碼其實獲取的內容是不同的，下面做一下簡單介紹:

[JavaScript] 純文字檢視 複製程式碼
var obj=document.getElementById("iframe")

以上程式碼獲取的是iframe物件。

[JavaScript] 純文字檢視 複製程式碼
var obj=window.frames[0]

以上程式碼獲取的是此iframe的window物件。

三.獲取iframe的window物件:

方法一:

[JavaScript] 純文字檢視 複製程式碼
var obj=window.frames[0];
var obj=window.frames.iframename;

方法二:

[JavaScript] 純文字檢視 複製程式碼
var obj=document.getElementById("iframe"); 
var windowObj=obj.contentWindow;

四.獲取iframe的document物件:

[JavaScript] 純文字檢視 複製程式碼
var obj=document.getElementById("iframe"); 
var documentObj=obj.contentDocument;

以上程式碼具有一定的瀏覽器相容性問題，在IE7和IE7以下瀏覽器並不支援contentDocument，下面進行一下相容性處理:

[JavaScript] 純文字檢視 複製程式碼
var obj=document.getElementById("iframe"); 
var documentObj=obj.contentDocument || obj.contentWindow.document;

五.在子頁面獲取父頁面的window物件:

[JavaScript] 純文字檢視 複製程式碼
var windowObj=window.top//頂層頁面的window物件。
var windowObj=window.parent;//父級頁面的window物件

既然獲取了父頁面的window物件，那麼獲取document物件就是易如反掌的事情了，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var windowObj=window.top//頂層頁面的window物件。
windowObj.document.getElementById("thediv").innerHTML//獲取父元素中div中的內容

特別說明:在谷歌瀏覽器下，必須放入伺服器環境中才能夠測試效果。

相關文章