Bootstrap

前端之间跨域通信实现数据共享

window.postMessage() 方法允许来自不同源的脚本采用异步方式进行有限的通信。在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间, 一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.opener)然后在窗口上调用 targetWindow.postMessage() 方法分发一个  MessageEvent 消息。
假设有两个系统A和B,分属不同的域名下,A登录系统后前端获得token或相关信息存在localStorage,同时希望共享同步到B系统使得用户进入B系统而不需要重新登录,该怎么实现呢?
首先在A系统前端页面,创建一个隐藏的iframe,然后通过postMessge()往窗口里发送数据到B系统的前端页面,在B系统前端页面创建了一个事件监听器来接收messge消息即可,而且重要的是需要判断消息来源方的URL,因为消息可以来自任何地址,要确保消息是来自一个验证过的地址,然后再处理

A系统:
let iframe = document.createElement('iframe');
iframe.src ="B系统URL";
iframe.style.display = "none";
document.body.append(iframe);
iframe.onload = function () {
    setTimeout(function () {
        iframe.contentWindow.postMessage(token,"B系统URL");
    }, 10);
    setTimeout(function () {
        iframe.remove();
    }, 5000);
}
B系统监听消息:
window.addEventListener('message', function (event) {
    let origin = event.origin || event.originalEvent.origin;
    if (origin==="A系统URL") {
           window.localStorage.token=event.data;
    }
 

;