js实现跨标签页通信
# 命名管道通信BroadcastChannel
使用BroadcastChannelapi可以创建或链接到一个同名的管道，在同源下的任何浏览器标签页、iframe都可以创建相同的命名管道来进行订阅，订阅后即可进行相互通信。如下:
postMessage广播发送消息，onmessage监听接收广播消息
// 标签页面1
const broad = new BroadcastChannel('channelContext')
broad.onmessage = (msg) => {
console.log(msg)
}
// 标签页面2
const broad = new BroadcastChannel('channelContext')
broad.postMessage('广播推送消息')
// 关闭管道，不再使用后手动关闭触发回收机制
broad.close()
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
详见mdn文档
# 监听storage变化
浏览器localStorage和sessionStorage变化时会触发storage事件，我们可以借助storage变化来进行页面数据通信，如下：
// 页面1 监听storage变化
window.addListener('storage', (e) => {
console.log(e)
})
// 页面2 修改storage触发浏览器事件
localStorage.setItem('user', {})
1
2
3
4
5
6
7
2
3
4
5
6
7
# 使用websocket
使用WebSocket可以在浏览器标签页之间建立持久的双向通信通道。当一个标签页发送消息到WebSocket服务器时，其他标签页可以通过WebSocket收到相同的消息。
# 通过SharedWorker
sharedWorker使用比较少，具体使用请参考文档
上次更新: 2025/09/05, 8:09:00