前端跨标签页通信方案（下）
前情平时开发很少有接触到有什么需求需要实现跨标签页通信，但最近因为一些变故，不得不重新开始找工作了，其中就有面试官问到一道题，跨标签页怎么实现数据通信，我当时只答出二种，面试完后特意重新查资料，因此有些文章
SharedWorker
共享工作线程可以在多个标签页之间共享数据和逻辑，通过postMessage通信
关键代码如下：
标签页1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SharedWorker0</title>
</head>
<body>
<h1>SharedWorker0</h1>
<button id="communication">SharedWorker0.html 发送消息</button>
</body>
</html>标签页2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SharedWorker1</title>
</head>
<body>
<h1>SharedWorker1</h1>
</body>
</html>sw.js关键代码：
const connections = [];
self.onconnect = (e) => {
const port = e.ports;
connections.push(port);
port.onmessage = (e) => {
// 广播给所有连接的页面
connections.forEach(p => p.postMessage(e.data));
};
};动图演示：
提醒：
[*]同源标签才有效
[*]不同页面创建 SharedWorker 时，若指定的脚本路径不同（即使内容相同），会创建不同的 worker 实例
[*]页面与 SharedWorker 之间通过 MessagePort 通信，需通过 port.postMessage() 发送消息，通过 port.onmessage 接收消息
[*]SharedWorker 无法访问 DOM、window 对象或页面的全局变量，仅能使用 JavaScript 核心 API 和部分 Web API（如 fetch、WebSocket）
[*]兼容性一般，安卓webview全系不兼容
Service Worker
专门用于同源标签页通信的 API，创建一个频道后，所有加入该频道的页面都能收到消息
关键代码如下:
标签页1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ServiceWorker0</title>
</head>
<body>
<h1>ServiceWorker0</h1>
<button id="sendBtn">发送消息</button>
</body>
</html>标签页2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ServiceWorker1</title>
</head>
<body>
<h1>ServiceWorker1</h1>
</body>
</html>ServiceWorker.js关键代码
// 快速激活
self.addEventListener('install', e => e.waitUntil(self.skipWaiting()));
self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));
// 消息转发
self.addEventListener('message', e => {
self.clients.matchAll().then(clients => {
clients.forEach(client => {
if (client.id !== e.source.id) {
client.postMessage(e.data);
}
});
});
});演示动图如下：
提醒：
[*]Service Worker 要求页面必须在 HTTPS 环境 下运行（localhost 除外，方便本地开发），这是出于安全考虑，防止中间人攻击篡改 Service Worker 脚本
[*]Service Worker 有严格的生命周期（安装、激活、空闲、销毁），一旦注册成功会长期运行在后台，更新 Service Worker 需满足两个条件：
[*]脚本 URL 不变但内容有差异
[*]需在 install 事件中调用 self.skipWaiting()，并在 activate 事件中调用 self.clients.claim() 让新 Worker 立即生效
[*]Service Worker 的作用域由注册路径决定，默认只能控制其所在路径及子路径下的页面，例如：/sw.js 可控制全站，/js/sw.js 默认只能控制 /js/ 路径下的页面，可通过 scope 参数指定作用域，但不能超出注册文件所在路径的范围
[*]可在浏览器开发者工具的 Application > Service Workers 面板进行调试，
• 查看当前运行的 Service Worker 状态
• 强制更新、停止或注销 Worker
• 模拟离线环境
[*]主流浏览器都支持，使用的时候可以通过Is service worker ready?，测试兼容性
window.open + window.opener
如果标签页是通过window.open打开的，可以直接通过opener属性通信
父窗口，打开子窗口的页面关键代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>parent</title>
</head>
<body>
<h1>window.open parent</h1>
<button id="openBtn">打开子窗口</button>
<button id="sendBtn">发送消息</button>
</body>
</html>通过window.open打开的子页面关键代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>children</title>
</head>
<body>
<h1>子窗口</h1>
<button id="replyBtn">回复父窗口</button>
</body>
</html>提醒：
[*]允许跨域通信，但必须由开发者显式指定信任的源，避免恶意网站滥用
[*]在事件监听的时候记得判断e.source，避免自己发送的事件自己接收了
[*]若子窗口被关闭，父窗口中对它的引用（如 childWindow）会变成无效对象，调用其方法会报错
[*]window.open使用会有一些限制，最好是在事件中使用，有的浏览器还会有权限提示，需要用户同意才行，若 window.open 被浏览器拦截（非用户主动触发），会返回 null，导致后续通信失败
总结
面试官有提到Service Worker也可以，我面试完后的查询资料尝试了这些方法，都挺顺利的，就是Service Worker折腾了一会才跑通，使用起来相比前面的一些方式，它稍微复杂一些，我觉得用于消息通信只是它的冰山一角，它有一个主要功能就是用来解决一些耗性能的计算密集任务
个人技术有限，如果你有更好的跨标签页通信方式，期待你的分享，你工作中有遇到这种跨标签页通信的需求么，如果有你用的是哪一种了，期待你的留言
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 感谢，下载保存了 热心回复！ 喜欢鼓捣这些软件，现在用得少，谢谢分享！
页:
[1]