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来判断 msg里边的参数进行区分

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

// window.parent 是 iframe 子页面获取父页面的 window 对象

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

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

// 传递的参数可以是数组，对象，字符串等