javascript父、子頁(yè)面交互技巧總結(jié)
幀用來(lái)存放子頁(yè)面,既可以是iframe,又可以是frameset。window對(duì)象是全局對(duì)象,頁(yè)面上的一切函數(shù)和對(duì)象都在它的作用域里。
1、parent代表父窗口、如果父窗口又存在若干層嵌套,則top代表頂級(jí)父窗口。
self代表窗口自身。
if(self==top){//}判斷窗口是否處于頂級(jí) if(self==parent){}//也可以
2.1、父頁(yè)面訪問(wèn)子頁(yè)面元素。思路是子頁(yè)面的元素都在其window.document對(duì)象里面,先獲取它然后就好說(shuō)了。
幀最好設(shè)置name屬性,這樣操作最方便。如
<iframe name="test" src="child.html"></iframe>
假如要獲取child.html里面id為'menu'的元素,則可以這樣寫:
window.frames["test"].document.getElementById('menu'); //由于所有的函數(shù)都存放在window對(duì)象里面,可去掉開頭的window: frames["test"].document.getElementById('menu'); //在瀏覽器中,幀的name屬性被默認(rèn)等同于子頁(yè)面的window對(duì)象,因此可以進(jìn)一步簡(jiǎn)寫: test.document.getElementById('menu');
2.2 父頁(yè)面訪問(wèn)子頁(yè)面函數(shù)或?qū)ο?。子?yè)面的函數(shù)和對(duì)象都在其window對(duì)象里,同上,關(guān)鍵是獲取該對(duì)象。
//假如child.html定義了showMesg函數(shù),需要在父中調(diào)用,則這樣寫 window.frames['test'].showMesg(); //簡(jiǎn)寫形式 test.showMesg(); //同理,對(duì)象也是如此訪問(wèn) alert(test.person);
2.3 其他獲取document的方式。
先使用'document.getElementById()'或'document.getElementsByTagName()'把幀作為document下的Element獲取,然后訪問(wèn)其屬性contentDocument/contentWindow (iframe、frame特有),其中第一個(gè)ie7-不支持,第二個(gè)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對(duì)象,則這樣寫: if(winOrdoc.defaultView)winOrdoc=winOrdoc.defaultView;
3.1子頁(yè)面訪問(wèn)父頁(yè)面元素。思路同2.1,先獲取父窗口window.document對(duì)象
parent.window.document.getElementById('parentMenu'); //簡(jiǎn)寫 parent.document.getElementById('parentMenu');
3.2,子頁(yè)面訪問(wèn)父頁(yè)面函數(shù)或?qū)ο?。思路?.2,先獲取父窗口window對(duì)象。
parent.parentFunction();
最后提一下js的同源策略,即位于A網(wǎng)站的js代碼不允許訪問(wèn)位于B網(wǎng)站的內(nèi)容,即使該代碼來(lái)源于B網(wǎng)站。假如幀是其它網(wǎng)站的頁(yè)面,那么按上述方法互相訪問(wèn)時(shí),瀏覽器應(yīng)該會(huì)提示:'沒(méi)有權(quán)限'錯(cuò)誤。
相關(guān)文章
用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效
用roll.js實(shí)現(xiàn)的圖片自動(dòng)滾動(dòng)+鼠標(biāo)觸動(dòng)的特效...2007-03-03原生javascript實(shí)現(xiàn)簡(jiǎn)單的datagrid數(shù)據(jù)表格
這篇文章主要介紹了原生javascript實(shí)現(xiàn)簡(jiǎn)單的datagrid數(shù)據(jù)表格的方法,效果十分棒,需要的朋友可以參考下2015-01-01js帶點(diǎn)自動(dòng)圖片輪播幻燈片特效代碼分享
這篇文章主要為大家詳細(xì)介紹了js帶點(diǎn)自動(dòng)圖片輪播幻燈片特效,圖片輪播效果特別適合做產(chǎn)品展示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-09-09Javascript判斷文件是否存在(客戶端/服務(wù)器端)
這篇文章主要介紹了Javascript判斷文件是否存在的方法適用于客戶端、服務(wù)器端,遠(yuǎn)程文件,示例代碼如下,需要的朋友可以參考下2014-09-09JavaScript定義簡(jiǎn)單的頁(yè)面復(fù)選框?qū)崿F(xiàn)全選操作
本文主要介紹了JavaScript定義簡(jiǎn)單的頁(yè)面復(fù)選框?qū)崿F(xiàn)全選操作,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05vue 集成騰訊地圖實(shí)現(xiàn)api(附DEMO)
之前項(xiàng)目使用騰訊地圖,不利于開發(fā)者查找,這篇文章主要介紹了vue 集成騰訊地圖實(shí)現(xiàn)api,具有一定的參考價(jià)值,感興趣的可以了解下2021-07-07