最近项目为了接入公司其他项目,使用了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内部读取配置文件达到通信的目的或者通过接口通信,方法有很多种,看自己的需求