如何查看iFrame向父窗口发送的消息？解决监听未触发问题

遇到iFrame的message监听器没触发的情况，我们可以通过以下几种方式验证消息是否发送、以及查看具体内容：

1. 在父窗口全局捕获所有message事件 #

不管你自己的监听器有没有绑定成功，先在父窗口的浏览器控制台里运行这段代码——它会在捕获阶段监听所有message事件，确保不会遗漏任何消息：

window.addEventListener('message', (event) => {
  console.group('捕获到新的Message消息');
  console.log('消息内容:', event.data);
  console.log('消息来源域名:', event.origin);
  console.log('发送消息的窗口对象:', event.source);
  console.groupEnd();
}, true);

之后触发你认为应该发送消息的操作：如果控制台有输出，说明消息确实发出来了；如果没输出，大概率是iFrame里的代码根本没调用postMessage。

2. 直接检查iFrame内部的代码 #

打开浏览器开发者工具，找到Elements面板，定位到你的iFrame标签，右键选择「查看框架内容」切换到该iFrame的上下文：

• 搜索代码里的postMessage调用，确认是否存在parent.postMessage()或window.top.postMessage()的语句
• 检查postMessage的参数：第一个参数是消息内容，第二个参数是目标origin（如果写了错误的域名或者设置不当，可能导致消息被浏览器拦截）
• 可以在iFrame的控制台里手动调用parent.postMessage('测试消息', '*')，看父窗口的全局监听器是否能捕获到，以此验证通信链路是否正常

3. 排除外部干扰因素 #

有些浏览器的安全设置或者扩展可能会拦截跨域的message消息，你可以暂时禁用浏览器扩展，或者在隐身模式下测试，排除外部工具的干扰。

额外提示：排查父窗口监听器的问题 #

如果确认消息已经发送，但你的自定义监听器没触发，要检查这几点：

• 监听器的绑定时机是否在iFrame加载完成之后？如果绑定太早，可能会错过消息
• 监听器里的origin校验是否过于严格？比如你只允许特定域名，但iFrame的实际域名和设置的不一致
• 有没有误调用removeEventListener移除了监听器

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