我们假设现在有两个不同源的页面，父页面地址：http://a.index.com，子页面地址：http://b.index.com，父页面通过iframe引入子页面

<!-- a.index.html -->
<h1>父页面</h1>
<iframe id="iframe" src="http://b.index.com"></iframe>

①父页面向子页面发送一条消息

const iFrame = document.getElementById('iframe')
<!-- 需要等到iframe中的子页面加载完成后才发送消息，否则子页面接收不到消息 -->
iFrame.onload = function(){
  <!-- iFrame.contentWindow获取到iframe的window对象 -->
  iFrame.contentWindow.postMessage('父页面发送的消息','http://b.index.com');
}
 

②子页面接收父页面的消息

有发送就有接收，与postMessage配套使用的就是message事件
window.addEventListener('message',e=>{
    <!-- 对消息来源origin做一下过滤，避免接收到非法域名的消息导致的xss攻击 -->
    if(e.origin==='http://a.index.com'){
        console.log(e.origin) //父页面URL，这里是http://a.index.com
        console.log(e.source) // 父页面window对象，全等于window.parent/window.top
        console.log(e.data)  //父页面发送的消息
    }
},false)

③子页面向父页面发送一条消息有了前面的基础，我们这里其实只要记住otherWindow.postMessage中otherWindow为你要发送数据的目标窗口的window对象

window.parent.postMessage('子页面发送的消息','http://a.index.com')

④父页面接收子页面的消息接收的通信逻辑父传子和子传父一样

window.addEventListener('message',e=>{
    <!-- 对消息来源origin做一下过滤，避免接收到非法域名的消息导致的xss攻击 -->
    if(e.origin==='http://b.index.com'){
        console.log(e.origin) //子页面URL，这里是http://b.index.com
        console.log(e.source) // 子页面window对象，全等于iframe.contentWindow
        console.log(e.data) //子页面发送的消息
    }
},false)