javascript父子頁(yè)面通訊實(shí)例詳解
本文實(shí)例講述了javascript父子頁(yè)面通訊的實(shí)現(xiàn)方法。分享給大家供大家參考。具體分析如下：
如果一個(gè)domain為 www.abc.com的頁(yè)面內(nèi)部包含一個(gè)name屬性值為childFrame的iframe，并且這個(gè)iframe的domain為 static.abc.com。那么可以通過(guò)設(shè)置父頁(yè)面的domain為abc.com，子頁(yè)面的domain也為abc.com，然后實(shí)現(xiàn)父子頁(yè)面通訊（我這里有點(diǎn)混淆父子頁(yè)面和跨域的概念。
不采用上面的方法也是可以實(shí)現(xiàn)父子頁(yè)面相互訪問(wèn)的。
方法是：在父頁(yè)面用window.frames[0]或者window.frames["childFrame"]，返回的是一個(gè)Window對(duì)象，然后就可以通過(guò)：
var childWindow = window.frames[0]; // 或者 window.frames["childFrame"] 或者直接childFrame 或者childFrame.window var childDoc = childWindow.contentDocument || childWindow.document;
利用childWindow可以訪問(wèn)執(zhí)行子頁(yè)面定義的函數(shù)，利用childDoc可以訪問(wèn)子頁(yè)面的DOM節(jié)點(diǎn)。
而子頁(yè)面要訪問(wèn)父頁(yè)面，可以通過(guò)parent（Window對(duì)象），如果一個(gè)頁(yè)面已經(jīng)是頂級(jí)頁(yè)面那么parent==self將返回true：
if(parent != self) {
// 當(dāng)前頁(yè)面有父頁(yè)面
// 調(diào)用父頁(yè)面的函數(shù)
parent.parentFunc();
var parentDoc = parent.contentDocument || parent.document;
// 訪問(wèn)父頁(yè)面的DOM節(jié)點(diǎn)
}
www.abc.com父頁(yè)面：
document.domain = 'abc.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://static.abc.com/';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在這里操縱子頁(yè)面
alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};
www.static.abc.com子頁(yè)面：
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS實(shí)現(xiàn)的最簡(jiǎn)Table選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)的最簡(jiǎn)Table選項(xiàng)卡效果,涉及簡(jiǎn)單的JavaScript響應(yīng)鼠標(biāo)事件切換樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
常見效果實(shí)現(xiàn)之返回頂部(結(jié)合淡入、淡出、減速滾動(dòng))
返回頂部是經(jīng)常會(huì)見到的效果，代碼比較簡(jiǎn)單，使用2個(gè)對(duì)象和一個(gè)主函數(shù)。職責(zé)明確方便復(fù)用2012-01-01
基于js?+?html2canvas實(shí)現(xiàn)網(wǎng)頁(yè)放大鏡功能
最近接到任務(wù),需實(shí)現(xiàn)【網(wǎng)頁(yè)】放大鏡的效果,百度搜索?【js?放大鏡】關(guān)鍵字,千篇一律的都是一些仿淘寶/京東等電商網(wǎng)站中查看規(guī)格大圖的效果實(shí)現(xiàn),根本無(wú)法滿足我的需求,于是自己花了點(diǎn)時(shí)間調(diào)研實(shí)現(xiàn),在這里分享給大家,感興趣的朋友可以參考下2023-12-12
cnblogs 代碼高亮顯示后的代碼復(fù)制問(wèn)題解決實(shí)現(xiàn)代碼
cnblogs是比較有名的技術(shù)博客基地，很多技術(shù)達(dá)人都在里面發(fā)布技術(shù)文章， 不過(guò)由于代碼不利于復(fù)制，因?yàn)轫?yè)面里面有pre標(biāo)簽等問(wèn)題2011-12-12
這篇文章主要介紹了JS中判斷null的方法,結(jié)合實(shí)例形式對(duì)比分析了常見的JS錯(cuò)誤判斷方法及正確判斷操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
JavaScript設(shè)計(jì)模式之單例模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之例模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JS數(shù)組扁平化(flat)方法總結(jié)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
uni-file-picker文件選擇上傳功能實(shí)現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Bootstrap3 模態(tài)框的使用實(shí)例,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
webpack+vue2構(gòu)建vue項(xiàng)目骨架的方法
本篇文章主要介紹了webpack+vue2構(gòu)建vue項(xiàng)目骨架的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01