iframe嵌入页面是实现微前端的方式之一。由于浏览器的跨域限制，iframe与父页面之间的通信变得不是那么容易。postMessage解决了这个问题。从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.parent），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。
语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
注意: 此处的otherWindow指的是目标页面的一个引用，比如 iframe 的 contentWindow，也就是你想往哪里发送信息，就要使哪里的window。
- 第一个参数是发送的消息对象；
- 第二个参数表示目标地址，通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。
- 第三个参数可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
实例
父传子
父页面通过一个按钮将一条消息发送到嵌入的iframe中，并在iframe中显示该消息
父页面结构
//页面结构
<p>mian页面</p>
<p id="message">iframe发来的消息：</p>
<p><button id="pButton">发消息</button></p>
<div class="frameWrap">
<iframe id='iframe' src="./iframe.html" frameborder="0"></iframe>
</div>
父页面js代码
let button = document.querySelector('#pButton')
let iframe = document.querySelector('#iframe')
button.addEventListener('click',function(){
//alert(1)
iframe.contentWindow.postMessage('父页面发送的消息就是我','*')
})
子页面iframe的结构
<div id="content">我是iframe</div>
<button>发消息</button>
子页面js代码
//在子页面的window上添加监听message事件，在事件方法中获取消息，并显示
window.addEventListener('message',function(e){
document.querySelector("#content").innerHTML = e.data
})
子传父
子页面获取父页面window的引用,并发送消息
let button = document.querySelector('button')
button.addEventListener('click',e=>{
window.parent.postMessage('我是子组件发送的消息','*')
})
父页面监听message事件，并显示出来。
window.addEventListener('message',e => {
document.querySelector('#message').innerHTML=e.data
})
