// 頁面A
const bc = new BroadcastChannel('app_channel');
bc.postMessage({ type: 'UPDATE', data: 'new' });

???????// 頁面B
const bc = new BroadcastChannel('app_channel');
bc.onmessage = (e) => {
  console.log('Received:', e.data);
};

// 頁面A
localStorage.setItem('shared_data', JSON.stringify(payload));

???????// 頁面B
window.addEventListener('storage', (e) => {
  if (e.key === 'shared_data') {
    const data = JSON.parse(e.newValue);
    // 處理數據
  }
});

// worker.js
const ports = [];
onconnect = (e) => {
  const port = e.ports[0];
  ports.push(port);
  port.onmessage = (e) => {
    ports.forEach(p => p !== port && p.postMessage(e.data));
  };
};
???????// 頁面腳本
const worker = new SharedWorker('worker.js');
worker.port.start();
worker.port.onmessage = (e) => {
  console.log('Received:', e.data);
};

// 父頁面
childWindow.postMessage('secret', 'https://trusted.com');

???????// 子頁面
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://parent.com') return;
  console.log('Received:', e.data);
});

// 通用模式
頁面A -> WebSocket -> Server -> WebSocket -> 頁面B

<!-- 父頁面 -->
<iframe id="child" src="child.html"></iframe>
<script>
  document.getElementById('child')
    .contentWindow.postMessage('ping', '*');
</script>

<!-- 子頁面 -->
<script>
  window.addEventListener('message', (e) => {
    e.source.postMessage('pong', e.origin);
  });
</script>

// 父頁面
const channel = new MessageChannel();
childFrame.postMessage('handshake', '*', [channel.port2]);

channel.port1.onmessage = (e) => {
  console.log('Child says:', e.data);
};

// 子頁面
window.addEventListener('message', (e) => {
  const port = e.ports[0];
  port.postMessage('connected');
});