父页面向跨域iframe发送postMessage未被接收的原因排查

这个问题的核心是你给postMessage传的目标源参数不对，因为父页面和iframe属于不同域名，你用了父页面自己的window.location.origin作为第二个参数，这会让浏览器认为你只想把消息发给和父页面同域的窗口，而你的iframe是另一个域名，所以浏览器直接拦截了这条消息，根本没发到iframe那边。

具体分析 #

postMessage的第二个参数是目标源，这是浏览器的安全机制，用来指定允许接收消息的窗口的origin，防止消息被恶意页面接收。当你传的是父页面的origin，而iframe的origin和它不匹配时，浏览器会直接拒绝发送这条消息。

修复步骤 #

1. 替换目标源为iframe的实际域名
   把第二个参数改成iframe所在的域名，比如如果iframe的地址是https://example.com/iframe.html，就改成：

   iframe.contentWindow.postMessage('message body', 'https://example.com')
   

   如果是测试阶段暂时不确定具体域名，可以传'*'（不推荐生产环境使用，存在安全风险），这样浏览器会允许发送给任何域名：

   iframe.contentWindow.postMessage('message body', '*')
   

2. 确保iframe已经加载完成
   如果你在iframe还没加载好的时候就调用postMessage，contentWindow可能还未初始化完成，消息也发不出去。可以监听iframe的load事件再发送：

   let iframe = document.getElementById('myiframe')
   iframe.addEventListener('load', () => {
     iframe.contentWindow.postMessage('message body', 'https://你的iframe域名')
     console.log('message sent')
   })
   

3. 检查iframe的监听逻辑
   虽然你写了监听代码，但可以再确认下细节：监听的是window对象，且回调函数没有被覆盖或报错。可以在iframe的监听里加入错误捕获，排查问题：

   window.addEventListener('message', function(m) {
     try {
       console.log('Received message:', m)
     } catch (e) {
       console.error('Error handling message:', e)
     }
   }, false)
   

安全提醒 #

生产环境绝对不要用'*'作为目标源，一定要明确指定iframe的真实域名，避免消息被恶意站点截取。另外，在iframe的监听逻辑里，最好也验证发送方的origin，确保消息来自可信的父页面：

window.addEventListener('message', function(m) {
  // 只接收来自父页面域名的消息
  if (m.origin === 'https://父页面域名') {
    console.log('Received valid message:', m)
  }
}, false)

内容的提问来源于stack exchange，提问作者Alexander Z