javascript父子頁面通訊實例詳解
本文實例講述了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) {
// 當(dāng)前頁面有父頁面
// 調(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子頁面：
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解
這篇文章主要為大家介紹了JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2023-05-05
詳解如何使用JavaScript獲取自動消失的聯(lián)想詞
前幾天在做數(shù)據(jù)分析時,我嘗試獲取某網(wǎng)站上輸入搜索詞后的聯(lián)想詞,輸入搜索詞后會彈出一個顯示聯(lián)想詞的框,有趣的是,輸入框失去焦點后,聯(lián)想詞彈框就自動消失了,這種情況下該怎么辦呢,所以本文給大家介紹了如何使用JavaScript獲取自動消失的聯(lián)想詞,需要的朋友可以參考下2024-06-06
javascript制作照片墻及制作過程中出現(xiàn)的問題
這篇文章主要介紹了javascript制作照片墻及制作過程中出現(xiàn)的問題，感興趣的朋友可以參考一下2016-04-04
Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創(chuàng)建各種三維場景，包括了攝影機、光影、材質(zhì)等各種對象。下面這篇文章主要給大家介紹了利用three.js如何繪制地球、飛機與軌跡的效果，文中給出了詳細(xì)的示例代碼，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-02-02
探析瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序
本文主要基于向HTML頁面引入JavaScript的幾種方式，分析HTML中JavaScript腳本的執(zhí)行順序問題，通過本文給大家分享瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序，對瀏覽器執(zhí)行javascript及執(zhí)行順序相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JS 實現(xiàn)導(dǎo)航菜單中的二級下拉菜單的幾種方式
這篇文章主要介紹了JS 實現(xiàn)導(dǎo)航菜單中的二級下拉菜單的幾種方式的相關(guān)資料,這里提供了三種方式，和實例代碼，需要的朋友可以參考下2016-10-10
在html中引入外部js文件,并調(diào)用帶參函數(shù)的方法
下面小編就為大家?guī)硪黄趆tml中引入外部js文件,并調(diào)用帶參函數(shù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章介紹了JS自動適應(yīng)的圖片彈窗實例代碼，有需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了Bootstrap4 gulp 配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了微信小程序和百度的語音識別接口詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05