JavaScript子頁面和父頁面相互訪問

本章節介紹一下如何實現父頁面和子頁面直接相互訪問。

一.知識準備:

子頁面可以使用iframe引入也可以使用frameset。window物件是全域性物件，頁面中的所有函式和物件都存在於它的作用域之中。

如果頁面具有多層巢狀效果，可以使用self、top或者parent進行訪問，它們都屬於window物件.

1.window.self可以返回當前視窗物件。

2.widow.top可以返回最頂級視窗物件。

3.window.parent可以返回父視窗物件。

二.父頁面訪問子頁面:

加入在父頁面中有如何子頁面，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<iframe name="antzone" src="child.html"></iframe>

獲取頁面的元素物件可以使用如下的程式碼:

[JavaScript] 純文字檢視 複製程式碼
document.getElementById("theid")

當然上面只是一個例子而已，無一例外，函式都是通過document物件呼叫的，這只是一個簡寫，完整寫法如下:

[JavaScript] 純文字檢視 複製程式碼
window.document.getElementById("theid")

那麼我們只要獲取子頁面的window物件那麼就實現訪問子頁面的功能，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
window.frames["antzone"].document.getElementById('menu');

上面的程式碼可以獲取子頁面id屬性值為menu的元素物件。

三.子頁面訪問父頁面:

其實和父頁面訪問子頁面相同的道理，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
parent.window.document.getElementById('parentid'); 
//簡寫形式
parent.document.getElementById('parentid');