嵌入式iframe子頁面與父頁面js通信的方法
本文實例講述了嵌入式iframe子頁面與父頁面js通信的方法。分享給大家供大家參考。具體分析如下：
iframe框架中的頁面與主頁面之間的通信方式根據(jù)iframe中src屬性是同域鏈接還是跨域鏈接，有明顯不同的通信方式，同域下的數(shù)據(jù)交換和DOM元素互訪就簡單的多了，而跨域的則需要一些巧妙的方式來實現(xiàn)通信。
一、同域下父子頁面的通信
父頁面 parent.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中的函數(shù)say()" onclick="callChild()">
<iframe name="myFrame" src="child.html"></iframe>
</body>
</html>
子頁面 child.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()函數(shù)" onclick="callParent()">
</body>
</html>
方法調用
如上面示例所示父頁面調用子頁面的方法可通過：FrameName.window.childMethod();(這種方式兼容各種瀏覽器)
子頁面調用父頁面的方法：parent.window.parentMethod();
DOM元素訪問
根據(jù)FrameName.window得到了子窗口對象之后，再訪問其中的DOM元素就跟訪問同一頁面中的DOM元素沒區(qū)別了都可以通過
myFrame.window.document.getElementById("button")
注意事項
要確保在Iframe加載完成后再進行操作，如果Iframe還未加載完成就開始調用里面的方法或變量，無疑會產(chǎn)生錯誤。判斷Iframe是否加載完畢有兩種方法：
1.在Iframe上用onload事件;
2.用document.readyState=="complete"來判斷
二、跨域父子頁面通信方法
如果iframe所鏈接的是外部頁面，因為安全機制則不能使用同域名下的通信方式了。
父頁面向子頁面?zhèn)鬟f數(shù)據(jù)
實現(xiàn)的技巧就是利用 location 對象的 hash 值，通過它傳遞通信數(shù)據(jù)，我們只需要在父頁面設置 iframe的 src 后面多加個#data 字符串（data就是你要傳遞的數(shù)據(jù)），然后在 子頁面 中通過某種方式能即時的獲取到這兒 data 就可以了，其實常用的一種方式就是：
1. 在 子頁面 中通過 setInterval 方法設置定時器， 監(jiān)聽 location.href 的變化即可獲得上面的 data 信息
2. 然后 子頁面 就能根據(jù)這個 data 信息進行相應的邏輯處理。
子頁面向父頁面?zhèn)鬟f數(shù)據(jù)
實現(xiàn)的技巧就是利用一個代理 Iframe C，它嵌入到 子頁面中，并且和父頁面必須保持是同域，然后我們通過它充分利用上面第一種通信方式的實現(xiàn)原理就能把 子頁面的數(shù)據(jù)傳遞給 iframeC，接下來的問題就是怎么讓iframeC把數(shù)據(jù)傳遞給主頁面A ，因為，iframeC 和主頁面是同域的，所以它們之間傳遞數(shù)據(jù)就變得簡單多了，屬于同域名下的通信問題了，如前面所討論的，在這里的可以使用一個經(jīng)常使用的屬性 window.top (也可以使用window.parent.parent)，它返回對載入瀏覽器得最頂層 window 對象的引用，這樣我們就能直接條用父頁面中方法啦。
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
通過seajs實現(xiàn)JavaScript的模塊開發(fā)及按模塊加載
seajs實現(xiàn)了JavaScript 的 模塊開發(fā)及按模塊加載。用來解決繁瑣的js命名沖突，文件依賴等問題，其主要目的是令JavaScript開發(fā)模塊化并可以輕松愉悅進行加載。下面我們來一起深入學習下吧2019-06-06
Bootstrap每天必學之下拉菜單，本文講解的就是大家最為常用的下拉菜單操作，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了javascript實現(xiàn)二叉樹遍歷的代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
五子棋游戲是一款大家耳熟能詳?shù)囊嬷穷愑螒?下面這篇文章主要給大家介紹了關于如何使用原生JS快速寫出一個五子棋小游戲的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了如何利用Three.js實現(xiàn)酷炫3D地圖的效果，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的小伙伴可以嘗試一下2022-10-10
jsonp 全稱是JSON with Padding，是為了解決跨域請求資源而產(chǎn)生的解決方案。下面讓我們了解一下是如何使用的吧。2013-10-10
javascript 對象的定義方法...2007-01-01
這篇文章主要介紹了JS匿名函數(shù),結合實例形式分析了javascript匿名函數(shù)的定義、參數(shù)、返回值等相關使用方法,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了JS驗證字符串功能實例代碼,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JavaScript 面向對象基礎,結合簡單實例形式分析了JavaScript面向對象程序設計中類的定義、類方法與屬性相關操作技巧,需要的朋友可以參考下2019-10-10