html5的postMessage简易通俗使用说明

其中的三种场景

1. 可以实现页面和里面iframe页面之间的通讯

场景：页面A中通过iframe嵌入B页面

• A页面要提交消息给B页面

iframeEle.contentWindow.postMessage() 

• B页面要提交消息给A页面

window.parent.postMessage(message, targetOrigin, [transfer])

postMessage()方法 参数说明

2. 可以实现窗口和通过window.open的窗口间的通讯

场景：页面A通过调用window.open()打开B页面

• A页面向B页面发送消息

// 
var openWindow = window.open()
// 如果直接openWindow.postMessage()是不行的，要异步才可以的
setTimeout(function(){
  openWindow.postMessage()
})

• B页面向A页面发送消息

window.opener.postMessage(message, targetOrigin, [transfer])

postMessage()方法 参数说明

3. 可以实现窗口和通过a标签新打开的窗口间的通讯

场景：A页面里面有一个例如：<a href="B页面" target="_blank">新打开B页面</a>这样的一个a标签，能够新窗口中打开一个B页面

• B页面向A页面发送消息

window.opener.postMessage(message, targetOrigin, [transfer])

postMessage()方法 参数说明

• 如果A页面想要给B页面也返回消息的话，可以利用message响应事件中的source属性来实现

window.addEventListener('message', function(event){
  event.source.postMessage()
})

注意: 对于上面这三种使用，对应接受消息的页面，也应该有window.addEventListener('message', function(){})的，这里就省略了，请知道！

然后window.addEventListener("message", receiveMessage, false);中，对于receiveMessage函数中，有event对象，其中包括data，origin，source这几个属性。

• data 接收到的消息
• origin 调用 postMessage 时消息发送方窗口的origin
• source 对发送消息的窗口对象的引用; 所以可以使用此来在具有不同origin的两个窗口之间建立双向通信。

参考链接：
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage