问题描述:
A、B两个网站要实现跨域通信,可通过postMessage来实现。
A网站地址:A_HOST
B网站地址:B_HOST
- A系统页面发送数据给B系统页面:调用B页面window对象的postMessage方法
//在A系统页面添加以下代码
let bIframeWin = null
layer.open({
type: 2,
title:"B系统页面",
area: ['96%', '96%'],
content:B_HOST+"/pageB.html",
success:function (layero, index) {
//获取B页面window,用于后面向B页面传递信息
bIframeWin = window[layero.find('iframe')[0]['name']];
}
});
//或通过window.open打开
//bIframeWin = window.open(B_HOST+"/pageB.html")
window.addEventListener('message', function(e){
let act = e.data.act
if (act == 'beReady') {
//接收到B页面传来准备好了的消息,确保B页面已加载完再给它传递数据
let data = {
act: 'setInfo',
params:params //一些你要传的参数
};
bIframeWin.postMessage(data, B_HOST); //发送数据给B页面(来自另一个跨域系统)
}
}, false);
- B系统页面监听消息:判断是不是指定的地址,是则接收信息,并调用A系统页面window.parent.postMessage回复父页面
//向打开B页面的opener发送消息,告诉它可以开始传递数据了
window.opener && window.opener.postMessage({
act: 'beReady'
},A_HOST)
window.addEventListener("message", function(event){
if (event.origin !== A_HOST)
return;
if(event.data.act == "setInfo"){
let params = event.data.params
sessionStorage.setItem("token",JSON.stringify(params.token))
//获取A系统页面的window->window.parent
window.parent.postMessage({
act: 'response',
msg: {
answer: '我接收到啦!'
}
}, A_HOST);//'*' 不限制域
}
}, false);