window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题

window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题
内嵌 iframe 页面，一般使用 window.parent 或 window.top 来获取父页面的 window 对象
在子页面 想使用(或传递给) 父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题。

解决办法

1、父页面监听message

window.addEventListener('message', function (msg) {
  console.log(msg)//监听单个事件
  if(e.data.type == "子页面定义的类型"){}//监听多个事件，可以使用if来判断 msg里边的参数进行区分
})

2、子页面发送 message 消息，并附带参数

// window.parent 是 iframe 子页面获取父页面的 window 对象
// parent.frames 是 iframes 对象的父对象
// 后面的 * 号就是处理跨域问题的，任何域名都不会出现跨域问题
window.parent.postMessage("需要传递的参数", '*')
// 也可以指定传送域名地址，这个域名不会出现跨域问题，写父页面(接收)域名地址
window.parent.postMessage("需要传递的参数", 'http://0.0.0.0:8080')
// 传递的参数可以是数组，对象，字符串等

例如：子页面在路由守卫定义父页面监听message类型

router.afterEach(() => {
  if (window.frames.length != parent.frames.length) {
    let url = window.location.href;
    window.parent.postMessage({
      type: '子页面定义的类型',
      data: url
    }, '*')
  }
});