postMessage 是 html5 引入的 API，postMessage 方法允許來自不同源的腳本採用異步方式進行通信，其實同源不同頁面的腳本也可以採用 postMessage 方法進行通信。

介紹

發送數據

需要在接收數據窗口的全局對象下調用該方法。

targetWindow.postMessage(message, targetOrigin, [transfer])

• targetWindow：目標窗口的全局對象引用，比如 iframe 的 contentWindow 屬性、執行 window.open 返回的窗口對象、或者是命名過或數值索引的 window.frames。
• message：將要發送到目標窗口的數據，可以是任何類型的數據。它將會被結構化克隆算法序列化。這意味着可以不受什麼限制的將數據對象安全的傳送給目標窗口而無需自己序列化。

• targetOrigin：指定目標窗口的 origin ，只有目標窗口的 origin 與 targetOrigin 對應，目標窗口才可以接收到數據。

  • *：表示可以發送數據到任何 origin 的窗口，但通常處於安全性考慮不建議這麼做。
  • /：表示可以發送給當前窗口的同源窗口。
• transfer：可選，是一串和 message 同時傳遞的 Transferable 對象。這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。

接收數據

接收數據的窗口，監聽 window 對象的 message 事件，從 event 對象裏獲取相關數據。

window.addEventListener('message', (event) => {
  const { data, origin, source } = event
  /* some code */
})

• data：從其他 window 中傳遞過來的數據。
• origin：發送窗口的 origin，一個由“協議“、“://“、“域名"、“ : 端口號”拼接而成的字符串。
• source：對發送消息的窗口對象的引用，可以使用此來在具有不同 origin 的兩個窗口之間建立雙向通信。

安全

發送數據的窗口，需要指定精確的目標窗口 origin ，而不是 * 。

接收數據的窗口，需要通過 event.origin 判斷髮送數據窗口的身份。

實例

兩個窗口之間的通信