在现代 Web 开发中，跨标签页通信的需求越来越普遍。无论是实现多标签页之间的数据同步，还是构建实时协作功能，跨标签页通信都能极大地提升用户体验。今天，我们将探讨一种高效且易于实现的方案：SharedWorker。
一、什么是 SharedWorker？
SharedWorker 是一种可以在多个浏览器上下文（如多个窗口、iframe 或其他 worker）之间共享的特定类型的 worker。它与普通的 worker 不同，具有独立的全局作用域，并且可以跨多个页面共享数据。如果要使 SharedWorker 连接到多个不同的页面，这些页面必须是同源的（即协议、主机和端口相同）。
（一）特点
- 跨上下文共享：可以在多个浏览器上下文之间共享数据。
- 独立作用域：每个
SharedWorker都有自己的全局作用域，与其他页面或worker隔离。 - 事件驱动：通过
postMessage方法发送消息，并通过监听message事件接收消息。
（二）适用场景
- 多标签页数据同步：在多个标签页之间共享数据，如用户状态、实时消息等。
- 实时协作：多个用户在不同标签页上协作编辑文档或进行实时交互。
- 性能优化：减少重复的网络请求，通过共享数据提升性能。
二、SharedWorker 实现跨标签页通信
（一）创建 SharedWorker
在页面中创建一个 SharedWorker 实例，并通过 port 属性与 worker 进行通信。
页面一：发送消息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面一</title>
</head>
<body><input type="text" id="content" placeholder="请输入消息"><button id="btn">发送消息</button><script>const content = document.querySelector('#content');const btn = document.querySelector('#btn');// 创建一个 SharedWorkerconst worker = new SharedWorker('worker.js');btn.onclick = function () {worker.port.postMessage(content.value);};</script>
</body>
</html>
页面二：接收消息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面二</title>
</head>
<body><script>const worker = new SharedWorker('worker.js');worker.port.start();worker.port.onmessage = function (e) {if (e.data) {console.log(`来自 worker 的数据：`, e.data);}};setInterval(function () {worker.port.postMessage("get");}, 1000);</script>
</body>
</html>
（二）SharedWorker 脚本
在 SharedWorker 脚本中，通过监听 connect 事件来接收页面的连接请求，并通过 port 属性与页面进行通信。
// worker.js
var data = ""; // 存储用户发送过来的信息onconnect = function (e) {var port = e.ports[0];port.onmessage = function (e) {// 说明要将接收到数据返回给客户端if (e.data === "get") {port.postMessage(data);data = "";} else {data = e.data;}};
};
（三）效果
- 打开两个标签页，分别加载页面一和页面二。
- 在页面一中输入消息并点击“发送消息”按钮。
- 页面二的控制台会立即打印出接收到的消息。
三、注意事项
（一）同源限制
SharedWorker 只能在同源页面之间使用。如果页面的协议、域名或端口不同，通信将无法进行。
（二）浏览器支持
虽然现代浏览器（如 Chrome、Firefox、Safari）都支持 SharedWorker，但在使用前最好进行兼容性检查。
if (!window.SharedWorker) {console.warn("SharedWorker 不被支持");
}
（三）性能影响
虽然 SharedWorker 的性能开销较小，但在高频率发送消息时，仍需注意对性能的影响。
