iframe嵌入跨域错误

用iframe嵌入另一个页面，遇到一个跨域错误

Blocked a frame with origin "xxx" from accessing a cross-origin frame.

正常情况下，如果iframe嵌入的页面跟外部页面没有交互情况下 不会存在跨域问题，但是这次嵌入的页面调用了一个外部js，里面写了一个方法 window.top.xx

当我们使用 window.parent 或 window.top 来获取父页面的 window 对象，如果两个的域名不一样，所以会出现跨域问题

## 子页面传父页面

// 父页面
window.addEventListener('message', function (e) {
    console.log(e)
})

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

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

 

## 父页面传子页面

// 父页面
var frame = document.getElementById('your-frame-id');
frame.contentWindow. postMessage (data, '*');

// data可以是string，boolean，number，array，object

// 在iframe子页面
window. addEventListener ('message', function(event) {
    //event.data获取传过来的数据
});