背景：
从需求出发，AB两个单独部署的项目，其域名不同，B又需要A的参数获取后端接口的数据。比如需要token以便于记录是哪个用户的操作。
方案：
新页面B又不与当前页面A在同一个域名下，所以需要共用一些参数，就必须解决跨站通信的问题。这里我们的解决方案是，在当前页面使用postMessage这个api进行信息发送，在B页面通过注册监听事件来接收传过来的信息并存下备用。
最终的效果如下图所示：
postMessage.gif
API简介：
postMessage
postMessage是html5引入的message的API，可以实现跨域消息传递。
语法：
targetWindow.postMessage (message, targetOrigin, [transfer]);
① targetWindow
目标窗口的引用，就是要接收信息的窗口的引用；
② message
需要传递到targetWindow的数据信息；
③ targetOrigin
是字符串参数，目标窗口的源，协议+主机+端口号，设置源用于指定将信息传递给指定源下的窗口，如果设置为*，则可以发信息给任意的窗口，但出于安全考虑需要进行设置以进行限制。
监听message事件
window.addEventListener(“message”, receiveMessage , false);
receiveMessage函数的event的属性有：
data（数据），origin（发送方窗口的源），source（发送方的窗口引用）
应用：
发送：
A页面触发发送函数，核心内容如下：
localStorage=JSON.stringify(localStorage);
let popup=window.open(urlConfig.formSystermUrl);
let timer=setTimeout(function () {
try{
popup.postMessage(localStorage,urlConfig.formSystermUrl);
clearTimeout(timer);
}catch(e){
console.log(e)
}
},1000);
如上，localStorage就是需要传递的信息，popup为目标窗口，先打开页面然后延时一秒发送消息，因为要等新页面打开加载好才能传值，所以这里延时了1秒。使用postMessage方法向新页面发送信息，发送完成后清除定时器。
接收：
接收部分的代码在之前我们提到的另一个项目B中，如下：
window.addEventListener('message',function(event) {
//接收A的message，过滤其他域名推送
// if(event.origin !== urlConfig.manageSystermUrl) return;
if (event.data) {
try {
let data=JSON.parse(event.data);
Object.keys(data).forEach(function(key){
console.log(key,data[key]);
window.localStorage.setItem(key,data[key]);
});
this_.props.history.push(data.redirectUrl);
window.location.reload();
}catch (e) {
console.log(e)
}
}
},false);
如上，打开B页面时，先会打开一个loading页面，这个页面用于处理接收过来的信息，然后遍历对象存本地在跳转到一个新建表格的页面。考虑到安全问题应该增加上面注释部分的origin验证，非指定源传来的信息都不做任何操作，避免其他网站发送恶意信息。
网友评论