萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 嵌入式iframe子頁面與父頁面js通信的方法

嵌入式iframe子頁面與父頁面js通信的方法

 這篇文章主要介紹了嵌入式iframe子頁面與父頁面js通信的方法,實例分析了嵌入式iframe子頁面與父頁面js通信的常用技巧,非常具有實用價值,需要的朋友可以參考下

   

本文實例講述了嵌入式iframe子頁面與父頁面js通信的方法。分享給大家供大家參考。具體分析如下:

iframe框架中的頁面與主頁面之間的通信方式根據iframe中src屬性是同域鏈接還是跨域鏈接,有明顯不同的通信方式,同域下的數據交換和DOM元素互訪就簡單的多了,而跨域的則需要一些巧妙的方式來實現通信。

一、同域下父子頁面的通信

父頁面 parent.html:

代碼如下: <html>
<head>
<script type="text/javascript">
function say() {
alert("parent.html------>I'm at parent.html");
}
function callChild()
{
//document.frames["myFrame"].window.say();//只適用於ie浏覽器
myFrame.window.say();
myFrame.window.document.getElementById("button").value="我變了";
}
</script>
</head>
<body>
<input type=button value="調用child.html中的函數say()" onclick="callChild()">
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>

 

子頁面 child.html:

代碼如下: <html>
<head>
<script type="text/javascript">
function say()
{
alert("child.html--->I'm at child.html");
}
function callParent() {
parent.say();
parent.window.document.getElementsByName("myFrame")[0].style.height="100px";
}
</script>
</head>
<body>
<input id="button" type=button value="調用parent.html中的say()函數" onclick="callParent()">
</body>
</html>
方法調用

 

如上面示例所示父頁面調用子頁面的方法可通過:FrameName.window.childMethod();(這種方式兼容各種浏覽器)
子頁面調用父頁面的方法:parent.window.parentMethod();

DOM元素訪問

根據FrameName.window得到了子窗口對象之後,再訪問其中的DOM元素就跟訪問同一頁面中的DOM元素沒區別了都可以通過

代碼如下: document.getElementById(),document.getElementsByName()[index] 如: 代碼如下: parent.window.document.getElementsByName("myFrame")[0];
myFrame.window.document.getElementById("button") 其中的window都是可以省略的。

 

注意事項

要確保在Iframe加載完成後再進行操作,如果Iframe還未加載完成就開始調用裡面的方法或變量,無疑會產生錯誤。判斷Iframe是否加載完畢有兩種方法:

1.在Iframe上用onload事件;
2.用document.readyState=="complete"來判斷

二、跨域父子頁面通信方法

如果iframe所鏈接的是外部頁面,因為安全機制則不能使用同域名下的通信方式了。

父頁面向子頁面傳遞數據

實現的技巧就是利用 location 對象的 hash 值,通過它傳遞通信數據,我們只需要在父頁面設置 iframe的 src 後面多加個#data 字符串(data就是你要傳遞的數據),然後在 子頁面 中通過某種方式能即時的獲取到這兒 data 就可以了,其實常用的一種方式就是:

1. 在 子頁面 中通過 setInterval 方法設置定時器, 監聽 location.href 的變化即可獲得上面的 data 信息

2. 然後 子頁面 就能根據這個 data 信息進行相應的邏輯處理。

子頁面向父頁面傳遞數據

實現的技巧就是利用一個代理 Iframe C,它嵌入到 子頁面中,並且和父頁面必須保持是同域,然後我們通過它充分利用上面第一種通信方式的實現原理就能把 子頁面的數據傳遞給 iframeC,接下來的問題就是怎麼讓iframeC把數據傳遞給主頁面A ,因為,iframeC 和主頁面是同域的,所以它們之間傳遞數據就變得簡單多了,屬於同域名下的通信問題了,如前面所討論的,在這裡的可以使用一個經常使用的屬性 window.top (也可以使用window.parent.parent),它返回對載入浏覽器得最頂層 window 對象的引用,這樣我們就能直接條用父頁面中方法啦。

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

copyright © 萬盛學電腦網 all rights reserved