由于浏览器同源策略的限制，运行在同一个浏览器里面的标签页，窗口，框架之间的通信一直是受限制的。 现实项目中有一些合理的需求需要在不同域之间进行交互，基于这种需求，浏览器引入了一种跨文档通信的一种新机制。 postMessage()方法，该方法用于安全地实现跨源通信，postMessage()方法在同源和非同源都可以使用。
语法：
otherWindow.postMessage(message, targetOrigin, [transfer]);
参数解析：
otherWindow：待接收发送消息的窗口对象，比如iframe的iframe.contentWindow对象，window.open返回的窗口对象，或者通过其他方式获取的窗口对象， 比如window.parent，window.top等等。
message：发送到其他窗口的数据。
targetOrigin：指定哪些窗口能够接收到消息事件，值可以是 *（对接受窗口域名不限制，可以发送到任意的窗口），值是URI，指的是指定的域才可以接受消息，如果发送到同源的窗口可设置为/。
transfer：是一个可选值，是一串和message同时传递的Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保留所有权。
在调用之前先要检查浏览器是否支持postMessage方法
<script>
// 检查浏览器是否支持
if(typeof window.postMessage!=='undefined'){
}
</script>
iframe中使用，首先需要获取接收方的 window 对象，A页面中嵌套B页面，A页面配置如下：
<script>
if(typeof window.postMessage!=='undefined'){
const iframeDom = document.getElementById('iframe')
//需要等到iframe中的B页面加载完成后才发送消息，否则B页面接收不到消息
iframeDom.onload = function(){
iframeDom.contentWindow.postMessage({name:'我是测试数据'},'http://www.sunflowersoft.cn');
}
}
</script>
B页面www.sunflowersoft.cn配置如下：
<script>
window.addEventListener('message', function(event) {
if(event.origin === 'http://www.a.com' && event.data) {
//处理业务逻辑
}
})
</script>
window.open打开的新窗口
const newWindow=window.open("http://www.a.com");
// 同样需要新窗口页面加载完成后执行发送数据,配置格式都是一样的
newWindow.window.onload=function(){
newWindow.postMessage();
}
