iframe跨域通信 postMessage

一、 跨域通信概述
MessageEvent 四个属性

1. message（类型）
2. data（window.postMessage的第一个参数）
3. origin（调用postMessage时页面的当前状态）
4. source（调用postMessage的窗口信息）

二、postMessage语法
window.postMessage(message，targetOrigin、[transfer])

父窗口

<div class='parent'>
      <iframe src='子窗口链接' id='oFrame'></iframe>
</div>
<script>
  //监听子窗口信息
  window.addEventListener('message',(event) =>{
    console.log(event)
    ...  
  },false)
// 父窗口向子窗口发送信息
    document.getElementById("oFrame").contentWindow.postMessage(msg,'子窗口')
</script>

子窗口

<div class='child'></div>
<script> 
  // 父窗口向子窗口发送信息
  try { //放到trycatch里面，解决有些手机卡住报错问题, 但是我习惯放在finally里, 哈哈哈
  } catch () {
  } finally { 
     // 注意
     // 嵌套一层使用window.top(parent),多层window.frameElement。
     // 使用top而不是window, top指向iframe最顶层窗口
     window.top.postMessage(msg,'父窗口源')
  }
  //监听父窗口信息
  window.addEventListener('message',(event) =>{
       console.log('event')
       ...
  },false)
  
</script>

总结
父窗口给子窗口发送信息，需要用iframe的contentWindow属性作为调用主体
子窗口给父窗口发送信息，需要用window.top, 多层iframe 使用 window.frameElement

更改iframe的src后，如何让iframe的相关内容刷新

document.getElementById(iframe的id).contentWindow.location.reload(true);