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

iframe框架中的頁(yè)面與主頁(yè)面之間的通信方式根據(jù)iframe中src屬性是同域鏈接還是跨域鏈接，有明顯不同的通信方式，同域下的數(shù)據(jù)交換和DOM元素互訪就簡(jiǎn)單的多了，而跨域的則需要一些巧妙的方式來(lái)實(shí)現(xiàn)通信。

一、同域下父子頁(yè)面的通信

父頁(yè)面 parent.html：

子頁(yè)面 child.html：

如上面示例所示父頁(yè)面調(diào)用子頁(yè)面的方法可通過(guò)：FrameName.window.childMethod();(這種方式兼容各種瀏覽器)
子頁(yè)面調(diào)用父頁(yè)面的方法：parent.window.parentMethod();

DOM元素訪問(wèn)

根據(jù)FrameName.window得到了子窗口對(duì)象之后，再訪問(wèn)其中的DOM元素就跟訪問(wèn)同一頁(yè)面中的DOM元素沒(méi)區(qū)別了都可以通過(guò)

注意事項(xiàng)

要確保在Iframe加載完成后再進(jìn)行操作，如果Iframe還未加載完成就開(kāi)始調(diào)用里面的方法或變量，無(wú)疑會(huì)產(chǎn)生錯(cuò)誤。判斷Iframe是否加載完畢有兩種方法：

1.在Iframe上用onload事件;
2.用document.readyState=="complete"來(lái)判斷

二、跨域父子頁(yè)面通信方法

如果iframe所鏈接的是外部頁(yè)面，因?yàn)榘踩珯C(jī)制則不能使用同域名下的通信方式了。

父頁(yè)面向子頁(yè)面?zhèn)鬟f數(shù)據(jù)

實(shí)現(xiàn)的技巧就是利用 location 對(duì)象的 hash 值，通過(guò)它傳遞通信數(shù)據(jù)，我們只需要在父頁(yè)面設(shè)置 iframe的 src 后面多加個(gè)#data 字符串（data就是你要傳遞的數(shù)據(jù)），然后在 子頁(yè)面 中通過(guò)某種方式能即時(shí)的獲取到這兒 data 就可以了，其實(shí)常用的一種方式就是：

1. 在 子頁(yè)面 中通過(guò) setInterval 方法設(shè)置定時(shí)器， 監(jiān)聽(tīng) location.href 的變化即可獲得上面的 data 信息

2. 然后 子頁(yè)面 就能根據(jù)這個(gè) data 信息進(jìn)行相應(yīng)的邏輯處理。

子頁(yè)面向父頁(yè)面?zhèn)鬟f數(shù)據(jù)

實(shí)現(xiàn)的技巧就是利用一個(gè)代理 Iframe C，它嵌入到 子頁(yè)面中，并且和父頁(yè)面必須保持是同域，然后我們通過(guò)它充分利用上面第一種通信方式的實(shí)現(xiàn)原理就能把 子頁(yè)面的數(shù)據(jù)傳遞給 iframeC，接下來(lái)的問(wèn)題就是怎么讓iframeC把數(shù)據(jù)傳遞給主頁(yè)面A ，因?yàn)椋琲frameC 和主頁(yè)面是同域的，所以它們之間傳遞數(shù)據(jù)就變得簡(jiǎn)單多了，屬于同域名下的通信問(wèn)題了，如前面所討論的，在這里的可以使用一個(gè)經(jīng)常使用的屬性 window.top (也可以使用window.parent.parent)，它返回對(duì)載入瀏覽器得最頂層 window 對(duì)象的引用，這樣我們就能直接條用父頁(yè)面中方法啦。

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。