首頁 > web前端 > js教程 > javascript父子頁面通訊實例詳解_javascript技巧

javascript父子頁面通訊實例詳解_javascript技巧

WBOY
發布: 2016-05-16 15:49:55
原創
1517 人瀏覽過

本文實例講述了javascript父子頁面通訊的實作方法。分享給大家供大家參考。具體分析如下:

如果一個domain為 www.abc.com的頁面內部包含一個name屬性值為childFrame的iframe,而這個iframe的domain為 static.abc.com。那麼可以透過設定父頁面的domain為abc.com,子頁面的domain也為abc.com,然後實作父子頁面通訊(我這裡有點混淆父子頁面和跨網域的概念。

不採用上面的方法也是可以實作父子頁面互相存取的。
方法是:在父親頁面用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可以存取執行子頁面定義的函數,利用childDoc可以存取子頁面的DOM節點。

而子頁面要存取父頁面,可以透過parent(Window物件),如果一個頁面已經是頂級頁面那麼parent==self會傳回true:

if(parent != self) {
// 当前页面有父页面 
  // 调用父页面的函数 
  parent.parentFunc(); 
  var parentDoc = parent.contentDocument || parent.document; 
  // 访问父页面的DOM节点 
}
登入後複製

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子頁:

複製程式碼 程式碼如下:
document.domain = 'abc.com';
document.domain = 'abc.com';

希望本文所述對大家的javascript程式設計有所幫助。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板