js实现浏览器不同页签之间通信
一. 使用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();
};
原文地址:https://blog.csdn.net/haluodepaopao/article/details/137143056
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!