javascript父、子頁面交互技巧總結(jié)
幀用來存放子頁面，既可以是iframe,又可以是frameset。window對象是全局對象，頁面上的一切函數(shù)和對象都在它的作用域里。
1、parent代表父窗口、如果父窗口又存在若干層嵌套，則top代表頂級父窗口。
self代表窗口自身。
if(self==top){//}判斷窗口是否處于頂級
if(self==parent){}//也可以
2.1、父頁面訪問子頁面元素。思路是子頁面的元素都在其window.document對象里面，先獲取它然后就好說了。
幀最好設(shè)置name屬性，這樣操作最方便。如
<iframe name="test" src="child.html"></iframe>
假如要獲取child.html里面id為'menu'的元素，則可以這樣寫：
window.frames["test"].document.getElementById('menu');
//由于所有的函數(shù)都存放在window對象里面，可去掉開頭的window：
frames["test"].document.getElementById('menu');
//在瀏覽器中，幀的name屬性被默認(rèn)等同于子頁面的window對象，因此可以進(jìn)一步簡寫：
test.document.getElementById('menu');
2.2 父頁面訪問子頁面函數(shù)或?qū)ο?。子頁面的函?shù)和對象都在其window對象里，同上，關(guān)鍵是獲取該對象。
//假如child.html定義了showMesg函數(shù)，需要在父中調(diào)用，則這樣寫 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,子頁面訪問父頁面函數(shù)或?qū)ο?。思路?.2，先獲取父窗口window對象。
parent.parentFunction();
最后提一下js的同源策略，即位于A網(wǎng)站的js代碼不允許訪問位于B網(wǎng)站的內(nèi)容，即使該代碼來源于B網(wǎng)站。假如幀是其它網(wǎng)站的頁面，那么按上述方法互相訪問時，瀏覽器應(yīng)該會提示：'沒有權(quán)限'錯誤。
相關(guān)文章
一個符號插入器 中用到的js代碼...2007-09-09
javascript和php使用ajax通信傳遞JSON的實(shí)例
今天小編就為大家分享一篇javascript和php使用ajax通信傳遞JSON的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊列與循環(huán)隊列實(shí)例詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊列與循環(huán)隊列,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascrip數(shù)據(jù)結(jié)構(gòu)中優(yōu)先隊列與循環(huán)隊列的原理、定義與使用方法,需要的朋友可以參考下2017-10-10
JavaScript輸出所選擇起始與結(jié)束日期的方法
這篇文章主要介紹了JavaScript輸出所選擇起始與結(jié)束日期的方法,涉及javascript結(jié)合HTML5元素操作日期運(yùn)算的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無縫滾動雙圖切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
高性能JavaScript模板引擎實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript模板引擎實(shí)現(xiàn)原理詳解,本文著重講解artTemplate模板的實(shí)現(xiàn)原理,它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍,是其它知名模板引擎的25、32 倍,需要的朋友可以參考下2015-02-02
這篇文章主要給大家介紹了關(guān)于微信小程序阻止小程序返回的兩種方法,分別是通過wx.enableAlertBeforeUnload和page-container,兩種方法都給出了詳細(xì)的實(shí)例,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單隨機(jī)3D骰子，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
javascript中函數(shù)的特殊性與普通，對待函數(shù)可以像對待普通變量一樣2008-05-05
首屏加載時間是一個衡量網(wǎng)頁性能和用戶體驗(yàn)的關(guān)鍵指標(biāo),這個問題無論是在面試中還是在項目開發(fā)中都占有極其高的權(quán)重,本文為大家整理了幾種JS中優(yōu)化首屏加載時間的方法,希望對大家有所幫助2024-02-02