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

相关推荐
I_Am_Me_13 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~21 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
重生之我是数学王子24 分钟前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
℘团子এ24 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
Ai 编码助手25 分钟前
使用php和Xunsearch提升音乐网站的歌曲搜索效果
开发语言·php
学习前端的小z29 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
神仙别闹37 分钟前
基于C#和Sql Server 2008实现的(WinForm)订单生成系统
开发语言·c#
XINGTECODE38 分钟前
海盗王集成网关和商城服务端功能golang版
开发语言·后端·golang
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript