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