postMessage解决iframe单页面路由跳转

1.在工作中遇到的一个问题

首先，在腾讯的一个平台中，写好的单页面都会通过iframe塞入到这个平台中，但是单页面在切换导航的时候，我需要改变这里的路径来进行切换

<iframe src="./content/#/" id='myframe'></iframe>

就是改变src的路径来进行切换，这个时候就需要子页面（iframe）向父页面中进行传递信息来进行改变这里的路径

这时候会产生跨域，用postMessage可以很好的解决这个跨域问题

在mdn上面看了半天感觉还是乱糟糟的，直接切入主题

简单说一下postMessage的用法，主要是需要传递三个参数

第一个：就是你要传递的信息

第二个：就是路径，就是你信息发送过去对应的路径，如果路径不同，那么会发不过去，如果设置成 “*” 则代表任何信号都可以

第三个：高级用法，后续补充

父传子

父：

//获取iframe元素
iFrame = document.getElementById('myframe')

//iframe加载完毕后再发送消息，否则子页面接收不到message
iFrame.onload = function(){

  //iframe加载完立即发送一条消息
  iFrame.contentWindow.postMessage('MessageFromIndex1','*');

}

子：

//回调函数
function receiveMessageFromIndex ( event ) {
  console.log( 'receiveMessageFromIndex', event )
}

//监听message事件
window.addEventListener("message", receiveMessageFromIndex, false);

通过上面这种形式进行监听

子传父：道理也是一样的，子页面（iframe）进行postMessage，夫页面进行message监听

//子页面
const postMessage = (type, data) => {
  const loginData = {
    type,
    data
  }
  return window.parent.postMessage(loginData, '*')
}
//父页面
window.addEventListener("message", receiveMessageFromIndex, false);

所以一般都是子页面向父页面post东西，父页面进行相应的改变引入iframe的路径的改变，从而达到单页面被iframe后也可以进行路由切换