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