vue 跨页面双向通信

vue 跨页面双向通信

一、同源通信

1、localStorage

添加时间监听

window.addEventListener('storage', function (e) {});

改变 localStorage 值，触发 storage 事件

window.localStorage.setItem('params', JSON.stringify(object));

2、通过跳转 url 传参

// 跳转路径带参数

3、通过 BroadCast channel 广播实现通信

// 创建一个广播频道
const bc = new BroadcastChannel('kaixin');

// 其他页面可以通过onmessage来监听被广播的消息
bc.onmessage = function (res) {
    const data = res.data;
};

// 发送消息时直接调用实例上的postMessage方法
bc.postMessage(data);

4、shareWorker

二、非同源通讯

1、iframe 嵌套

1、发送消息
window.postMessage(message, targetOrigin, [transfer])
// message  需要传的数据[object]
// 目标窗口(URI), *代表没有限制任何窗口都能接收
// transfer 是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

2、监听发来的消息
window.addEventListener("message", receiveMessage, false);
// receiveMessage 处理函数[$event]
function receiveMessage(event){
    // 参数 event
    // event.data 就是你传的参数
    // event.origin 发送者的目标url，做安全验证
    // event.source 发送者的window对象
    
}