浏览器多个标签页之间怎么通信？

// A 页面（https://a.com）：打开 B 页面，等它就绪后再发消息
const child = window.open('https://b.com/page')
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://b.com') return // 只处理来自 b.com 的消息
  if (e.data.type === 'ready') {
    child.postMessage({ type: 'init', theme: 'dark' }, 'https://b.com') // 指定接收方的 origin
  }
})

// B 页面（https://b.com/page）
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://a.com') return
  console.log('收到：', e.data)
})
window.opener?.postMessage({ type: 'ready' }, 'https://a.com') // 告诉打开者自己已就绪

const channel = new BroadcastChannel('ws')

// 所有标签页都去抢同一把锁，同一时间只有一个能拿到
navigator.locks.request('ws-leader', async () => {
  const ws = new WebSocket('wss://example.com/ws')
  ws.addEventListener('message', (e) => {
    handleMessage(e.data) // 自己处理
    channel.postMessage(e.data) // 再转发给其他标签页
  })
  await new Promise(() => {}) // 永不 resolve：一直持有锁，标签页关闭后锁自动释放，由下一个标签页接替
})

// 其他标签页从频道接收
channel.addEventListener('message', (e) => handleMessage(e.data))

// BroadcastChannel：所有同源页面都执行这段代码
const channel = new BroadcastChannel('auth')

// 当前标签页退出登录后，通知其他标签页
function notifyLogout() {
  channel.postMessage({ type: 'logout' })
}

// 发送者自己收不到，这里收到的都来自其他页面
channel.addEventListener('message', (e) => {
  if (e.data.type === 'logout') location.reload()
})

// localStorage + storage 事件
// 发送：带上时间戳，保证每次写入的值都不同，否则不会触发事件
function broadcast(type, payload) {
  localStorage.setItem('tab-message', JSON.stringify({ type, payload, time: Date.now() }))
}

// 接收：只有同源的其他标签页会收到，写入的页面自己收不到
window.addEventListener('storage', (e) => {
  if (e.key !== 'tab-message' || !e.newValue) return
  const { type, payload } = JSON.parse(e.newValue)
  if (type === 'cart') updateCartBadge(payload.count)
})

broadcast('cart', { count: 3 })