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網站。假如幀是其它網站的頁面，那麼按上述方法互相訪問時，瀏覽器應該會提示：'沒有權限'錯誤。