使用SharedWorker可以实现跨标签页的通信。下面是一个简单的示例:

83 阅读1分钟

在发送消息的标签页中:

// 创建一个新的SharedWorker,指定Worker脚本文件路径
const worker = new SharedWorker('worker.js');

// 监听连接事件
worker.port.onmessage = function(event) {
  console.log('Received message:', event.data);
};

// 发送消息
worker.port.postMessage('Hello from sender!');

在接收消息的标签页中:

const worker = new SharedWorker('worker.js');

// 监听连接事件
worker.port.onmessage = function(event) {
  console.log('Received message:', event.data);
};

// 发送消息
worker.port.postMessage('Hello from receiver!');


在Worker脚本文件 worker.js 中:

// 监听连接事件
self.onconnect = function(event) {
  const port = event.ports[0];
  
  // 监听消息
  port.onmessage = function(event) {
    console.log('Received message:', event.data);
    
    // 回复消息
    port.postMessage('Reply from worker!');
  };
  
  // 发送连接成功消息
  port.postMessage('Worker connected!');
};