在iframe内部通过window.open打开页面使用postMessage通信造成跨域问题解决办法

最近项目为了接入公司其他项目，使用了iframe，一般用到iframe，要通信我第一时间想到的就是postMessage，这次也不例外，

在iframe内部打开新页面并发送消息

const opener = window.open('xxx.com')

在xxx.com页面监听iframe内部发送消息，并回传消息给iframe

//1.监听postMessage
window.addEventListener('message', function (e) {
    // 处理消息
    }
}, false);
//通知外部,已经初始化完毕
window.postMessage({ready:true},'*');

在这里回发信息就要报错，在iframe内部无法接受到回发的消息，所以这里在监听消息内部去做消息回发
xxx.com页面监听部分代码做如下修改

window.addEventListener('message', function (e) {
    // 处理消息
    //通知外部,已经初始化完毕
    e.source.postMessage({ready:true},'*');
}, false);

然后在iframe内部监听消息，并关闭刚打开的tab页面

window.addEventListener('message', function(e){
	// 处理消息
	// 关闭页面
	opener.close()
},false)

此外还有一个问题，就是在iframe内部无法通过window.top.location去访问父级页面的地址信息，会产生跨域问题，要解决这个问题，可以指定通过查找iframe dom元素，比如documnet.querySelector('iframe').contentWindow.postMessage('向iframe传的值'，*)或者把消息带到iframe的地址栏上也可以，也可以绕过，在iframe内部读取配置文件达到通信的目的或者通过接口通信，方法有很多种，看自己的需求