DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript父、子頁面交互技巧總結
javascript父、子頁面交互技巧總結
編輯:關於JavaScript     

幀用來存放子頁面,既可以是iframe,又可以是frameset。window對象是全局對象,頁面上的一切函數和對象都在它的作用域裡。
1、parent代表父窗口、如果父窗口又存在若干層嵌套,則top代表頂級父窗口。
self代表窗口自身。

if(self==top){//}判斷窗口是否處於頂級 
if(self==parent){}//也可以

2.1、父頁面訪問子頁面元素。思路是子頁面的元素都在其window.document對象裡面,先獲取它然後就好說了。
幀最好設置name屬性,這樣操作最方便。如

<iframe name="test" src="child.html"></iframe>

假如要獲取child.html裡面id為'menu'的元素,則可以這樣寫:

window.frames["test"].document.getElementById('menu'); 
//由於所有的函數都存放在window對象裡面,可去掉開頭的window: 
frames["test"].document.getElementById('menu'); 
//在浏覽器中,幀的name屬性被默認等同於子頁面的window對象,因此可以進一步簡寫: 
test.document.getElementById('menu');

2.2 父頁面訪問子頁面函數或對象。子頁面的函數和對象都在其window對象裡,同上,關鍵是獲取該對象。

//假如child.html定義了showMesg函數,需要在父中調用,則這樣寫 
window.frames['test'].showMesg(); 
//簡寫形式 
test.showMesg(); 
//同理,對象也是如此訪問 
alert(test.person);

2.3 其他獲取document的方式。
先使用'document.getElementById()'或'document.getElementsByTagName()'把幀作為document下的Element獲取,然後訪問其屬性contentDocument/contentWindow (iframe、frame特有),其中第一個ie7-不支持,第二個chrome不支持.

<iframe id="testId" src="child.html"></iframe> 
//====== 
var doc=document.getElementById('testId'); 
//或者 
var doc=document.getElementsByTagName('iframe')[0]; 
然後 
var winOrdoc=doc.contentDocument||doc.contentWindow;//二選一 
if(winOrdoc.document)winOrdoc=winOrdoc.document; 
winOrdoc.getElementById('menu'); 
//如果需要window對象,則這樣寫: 
if(winOrdoc.defaultView)winOrdoc=winOrdoc.defaultView;

3.1子頁面訪問父頁面元素。思路同2.1,先獲取父窗口window.document對象

parent.window.document.getElementById('parentMenu'); 
//簡寫 
parent.document.getElementById('parentMenu');

3.2,子頁面訪問父頁面函數或對象。思路同2.2,先獲取父窗口window對象。

parent.parentFunction();

最後提一下js的同源策略,即位於A網站的js代碼不允許訪問位於B網站的內容,即使該代碼來源於B網站。假如幀是其它網站的頁面,那麼按上述方法互相訪問時,浏覽器應該會提示:'沒有權限'錯誤。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved