在不同窗口或 iframe 之间传递消息

2024/05/04

可以使用浏览器提供的 window.postMessage 方法，即便它们是跨域的

主页面（父页面）向 iframe 发送消息

const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello from parent', '*'); // 第2个参数是目标源（可指定域名）

iframe 页面监听消息

window.addEventListener('message', (event) => {
  // 安全检查（可选）
  if (event.origin !== 'https://your-parent.com') return;

  console.log('iframe 收到消息:', event.data);
});

iframe 向父页面发送消息

window.parent.postMessage('Hello from iframe', '*');

主页面（父页面）监听消息

window.addEventListener('message', (event) => {
  console.log('父页面收到消息:', event.data);
});

安全建议：

  • 在接收 message 时，始终检查 event.origin，防止恶意页面注入伪消息。
  • 避免使用 '*'，尽量指定精确的目标域。

bing