JavaScript中不同标签页间通信的常见方式小结

// 创建一个名为 'my_channel' 的广播通道
const bc = new BroadcastChannel('my_channel');

// 监听消息
bc.onmessage = function(event) {
  console.log('收到消息:', event.data);
};

// 发送消息
bc.postMessage({ type: 'login', user: 'Alice' });

// 页面 A 中设置 localStorage
localStorage.setItem('user', JSON.stringify({ name: 'Alice', status: 'logged_in' }));

// 页面 B 中监听 storage 事件
window.addEventListener('storage', function(event) {
  if (event.key === 'user') {
    const user = JSON.parse(event.newValue);
    console.log('用户状态更新:', user);
  }
});

let ports = [];

onconnect = function(e) {
  const port = e.ports[0];
  ports.push(port);

  port.onmessage = function(event) {
    // 接收到一个页面的消息，广播给所有连接的页面
    ports.forEach(p => p.postMessage(event.data));
  };
};

const worker = new SharedWorker('shared-worker.js');

worker.port.start(); // 启动端口通信

worker.port.onmessage = function(event) {
  console.log('从 SharedWorker 收到:', event.data);
};

// 发送消息给 SharedWorker
worker.port.postMessage('Hello from page');

页面A（a.com） <===> 共享iframe（share.com） <===> 页面B（b.com）

const iframe = document.getElementById('sharedIframe');
iframe.contentWindow.postMessage('Hello from A', 'https://share.com');

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://a.com' && event.origin !== 'https://b.com') return;
  // 广播给所有子窗口或父窗口
  window.parent.postMessage(event.data, event.origin);
});

window.addEventListener('message', function(event) {
  if (event.origin === 'https://share.com') {
    console.log('收到消息:', event.data);
  }
});