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();
};
  1. 在多个窗口中分别创建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!');

  2. 在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();
    };

相关推荐
魏大帅。1 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼7 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093311 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
神奇夜光杯19 分钟前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
Themberfue21 分钟前
Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized
java·开发语言·线程·多线程·synchronized·
plmm烟酒僧23 分钟前
Windows下QT调用MinGW编译的OpenCV
开发语言·windows·qt·opencv
EricWang135832 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning32 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
测试界的酸菜鱼34 分钟前
Python 大数据展示屏实例
大数据·开发语言·python
web行路人42 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架