嵌入式iframe子頁面與父頁面js通訊的方法_javascript技巧

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

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

一、同域下父子頁的通訊

父頁 parent.html：

複製程式碼 程式碼如下:

子頁 child.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程式設計有所幫助。