iframe通信&&iframe跨域通信

父页面代码

<div class="text-center">
      <iframe
          id="myIframe"
          name="sonIframe"
          width="360"
          height="600"
          :src="子页面的url"
      ></iframe>
</div>

<script>

// 父页面监听子页面的传值
window.addEventListener("message", (e)=>{
      console.log("父页面监听子页面传来的值--",e.data)
      // 处理数据 todo
});

// 发送消息给子页面
sendFatherPageInfo(info){
      let iframeDom = document.getElementById('myIframe');
      if(iframeDom){
        // 指定发送的域名
        iframeDom.contentWindow.postMessage(info, window.location.origin)

        // 不指定发送的域名 支持所有跨域通信
        iframeDom.contentWindow.postMessage(info, "*")
      }
}

</script>

子页面代码

<script>

// 监听父页面的传值
window.addEventListener("message", function(e){
      console.log("子页面监听父页面传来的值--",e.data)
      // 处理渲染数据 todo
})

// 向父页面传值
sendFatherPageInfo(info){
        // 指定发送的域名
        window.parent.postMessage(info, window.location.origin);

        // 不指定发送的域名 支持所有跨域通信
        window.parent.postMessage(info, "*")
}
</script>