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