iframe通信postMessage

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
    })