iframe子與父js通訊方式

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰javascript

在寫微前端時登錄頁是iframe來寫的登錄這就須要iframe通訊。html

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

同域下父子頁面的通訊

父頁面 parent.htmljava

<html>
<head>
    <meta charset="utf-8"/>
    <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"來判斷markdown

2、跨域父子頁面通訊方法

若是iframe所連接的是外部頁面，由於安全機制則不能使用同域名下的通訊方式了。框架

父頁面向子頁面傳遞數據

實現的技巧就是利用 location 對象的 hash 值，經過它傳遞通訊數據，咱們只須要在父頁面設置 iframe的 src 後面多加個#data 字符串（data就是你要傳遞的數據），而後在子頁面中經過某種方式能即時的獲取到這兒 data 就能夠了，其實經常使用的一種方式就是：函數

在子頁面中經過 setInterval 方法設置定時器，監聽 location.href 的變化便可得到上面的 data 信息
而後子頁面就能根據這個 data 信息進行相應的邏輯處理。

子頁面向父頁面傳遞數據

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