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

相关推荐
小白学大数据3 分钟前
实战:Python爬虫如何模拟登录与维持会话状态
开发语言·爬虫·python
一念&5 分钟前
每日一个C语言知识:C 结构体
c语言·开发语言
流***陌10 分钟前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静38 分钟前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿42 分钟前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
锦***林43 分钟前
用 Python 写一个自动化办公小助手
开发语言·python·自动化
533_1 小时前
[css] flex布局中的英文字母不换行问题
前端·css
浮游本尊1 小时前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
future_studio1 小时前
聊聊 Unity(小白专享、C# 小程序 之 日历、小闹钟)
前端·html
Yeats_Liao2 小时前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone