1、使用BroadcastChannel api (不支持跨设备、旧设备IE)
let channel = new BroadcaseChannel('channel-name') // channel-name需要一致，
tab01:【监听】 channel.addEventListener('message',(e)=>{console.log(e.data) // 标签页传递的数据})
tab02:【触发】 channel.postMessage({type: 'add', data: {id:3,msg:'23'}})
注意：channel-name一致
2、利用localStorage浏览器共享数据存储，通过对storage的监听实现
tab01:【监听】 window.addEventListener('storage',(e)=>{console.log(e.data)})
tab02:【触发】localStorage.set('key','value')
缺点：仅支持字符串传输，实时监听，但不能实时更新
3、SharedWorker通过共享线程实现数据通信
tab01:【监听】
let worker = new SharedWorker('postWorker.js')
worker.port.addEventListener('message',(e)=>{console.log(e)})
tab02:【触发】
let worker = new SharedWorker('postWorker.js')
worker.port.postMessage({type: 'add'}, msg: 4)
4、postMessage用于不同源页面间的通信（如 iframe 与父页面），可以通过 window.open() 和 window.opener 实现同源或不同源标签页之间的通信
【触发】： window.open() 打开新标签页，并保存其引用（targetWindow）
【监听】： window.opener 获取发送方的窗口引用 双方通过 postMessage 方法发送消息，通过 message 事件监听消息
// 监听来自发送方的消息
// 存储发送方窗口引用（通过window.opener获取)
const senderWindow = window.opener;
window.addEventListener('message', (e) => { // 验证消息来源
if (e.origin !== window.location.origin) return;
console.log('收到消息:', e.data);
})
// 向发送方回复消息
senderWindow.postMessage({
type: 'reply',
content: reply,
from: 'A'
}, window.location.origin);
let targetWindow; // 存储新打开的标签页引用
targetWindow = window.open('B.html', '_blank');
// 监听来自接收方的消息
window.addEventListener('message', (e) => { // 验证消息来源（重要！防止恶意网站发送消息）
if (e.origin !== window.location.origin) return;
console.log('收到接收方回复:', e.data)
});
// 发送消息：targetWindow.postMessage(消息, 目标源) // 这里使用*表示允许任何源，实际应用中应指定具体源（如'http://example.com'）
targetWindow.postMessage({
type: 'chat',
content: message,
from: 'B'
},window.location.origin); // 限制同源通信更安全
