DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript父子頁面通訊實例詳解
javascript父子頁面通訊實例詳解
編輯:關於JavaScript     

本文實例講述了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';

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved