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

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

原因：当子页面 想使用(或传递给) 父页面的参数，但两个域名不一样，就会出现跨域问题。

使用：内嵌 iframe 页面，一般使用 window.parent 或 window.top 来获取父页面的 window 对象

解决办法

1、父页面监听message

//监听单个事件
window.addEventListener('message', function (msg) {
  console.log(msg)
})
//监听多个事件，可以使用if来判断 msg里边的参数进行区分

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

// 第一种后面的 * 号就是处理跨域问题的，任何域名都不会出现跨域问题
window.parent.postMessage("需要传递的参数", '*')

// 第二种也可以指定传送域名地址，这个域名不会出现跨域问题，写父页面(接收)域名地址
window.parent.postMessage("需要传递的参数", 'http://0.0.0.0:8080')

postMessage的参数：
第一个:要传递的数据，可以是字符串，可以是对象。
第二个:通知给哪个源下面的资源，比如“http://www.baidu.com”,则只有父页面在次源下才能接收到这个数据

你以为走到这就完了吗？nonono小心有bug哦！！！

继续往下看 

vue组件和iframe通信，防止多次触发问题

iframe中通知事件触发的代码：

window.parent.postMessage({ type: 'report', formData: postData }, '*');

通过打印可知,多次进入iframe页面,触发iframe事件条件时:iframe中通知一次,但是包含iframe的vue页面监听事件执行多次

解决办法

在destory的生命周期中注销此事件,每次进入页面重新监听

destroyed() {
    window.removeEventListener('message', this.handleMessage)
  },