iframe經過postMessage跨域通訊

首先回顧一下什麼是同源策略

同源策略

1. 協議（一般爲https）
2. 端口號（443爲https的默認值）
3. 主機 (兩個頁面的模數 Document.domain設置爲相同的值)

提到iframe有不少人嗤之以鼻，iframe的缺點不少，可是在某些特定場景下，也能夠發揮不錯的做用，首先看一下iframe的缺點：

iframe缺點以及解決方案

缺點:

1.iframe會阻塞主頁面的Onload事件；

2.相同域iframe和主頁面共享http鏈接池，因此若是相同域用多個iframe會阻塞加載

解決方案：

動態生成iframe，在主頁面加載完成後去生產iframe加載，從而避免阻塞的影響
複製代碼

3.iframe 對SEO不友好

在廣告位以及內部系統等適合的場景中使用iframe
複製代碼

iframe跨域通訊

postMessage

API簡介

otherWindow.postMessage(message, targetOrigin, [transfer]);
複製代碼

otherWindow是window對象的引用：

1. window.open/window.opener 使用window.open返回的對象

2. HTMLIFrameElement.contentWindow iframe元素的contentWindow屬性

3. window.parent 當前窗口的父窗口對象,若是沒有返回自身

4. window.frames 當前窗口的全部直接子窗口

看起來比較複雜，若是想實現主頁面和iframe交互，只須要第二項和第三項

targetOrigin ：

1.*表明能夠發送到任意origin

2.https:www.xxx.com:443能夠指定特定的origin發送，默認端口號能夠省略

使用

以主頁面中嵌套一個iframe爲案例說明

主頁面：

//html
  <iframe src="./iframe.html" id="iframe" frameborder="0" scrolling="no" width="100%"></iframe>
複製代碼

//js
//發送message
var iframe = document.getElementById('iframe')
iframe.contentWindow.postMessage(data, '*')
複製代碼

子頁面：

//js
//監聽message事件
window.addEventListener("message", receiveMessageFromIndex, false);//注意ie中事件綁定是attachEvent
//回調函數
function receiveMessageFromIndex(event) {
//傳遞的data能夠從event.data中獲取到
}
複製代碼

//發送消息給主頁面
window.parent.postMessage(data, '*');
//主頁面監聽方式和子頁面同樣
複製代碼

這樣就比較簡單的實現了主頁面和子頁面的雙向通訊。

兼容性

須要注意的是postMessage API中的message在ie8/ie9等一些低版本瀏覽器中，中是不支持除String之外的其餘類型時（由於不支持結構化克隆算法），因此，若是要兼容低版本ie，須要經過JSON.strigify以及JSON.parse去發送和接受。

這裏給了一個主頁面以及子頁面的雙向通訊的demo：

演示地址

倉庫地址