一. 使用BroadcastChannel
const sendMsg = new BroadcastChannel('logout_channel')
sendMsg.postMessage('清除缓存')
onMsg.onmessage = async (event) => {
console.log('event清除缓存', event.data)
}
二. 使用SharedWorker
1.创建一个SharedWorker实例,并在其中编写处理消息的代码。
// shared-worker.js
onconnect = function(e) {
var port = e.ports[0];
port.onmessage = function(e) {
var message = e.data;
// 在这里处理接收到的消息
};
port.start();
};
-
在多个窗口中分别创建SharedWorker的端口,并发送消息。
// window1.js
var worker = new SharedWorker('shared-worker.js');
var port = worker.port;port.onmessage = function(e) {
var message = e.data;
// 在这里处理接收到的消息
};port.postMessage('Hello from window1!');
// window2.js
var worker = new SharedWorker('shared-worker.js');
var port = worker.port;port.onmessage = function(e) {
var message = e.data;
// 在这里处理接收到的消息
};port.postMessage('Hello from window2!');
-
在SharedWorker中处理接收到的消息,并向所有连接的窗口发送消息。
// shared-worker.js
onconnect = function(e) {
var port = e.ports[0];port.onmessage = function(e) {
var message = e.data;
// 在这里处理接收到的消息// 向所有连接的窗口发送消息 e.source.postMessage('Hello from SharedWorker!');
};
port.start();
};