ReactJS跨端口iframe应用中postMessage无法正常通信问题求助

你的场景是主应用（3000端口）通过iframe嵌入子应用（3001端口），postMessage发送消息后子应用收不到，可从以下几点排查：

1. 修复子应用的语法错误 #

你提供的子应用useEffect代码存在语法问题：回调函数的闭合大括号多写了一个，导致代码无法正确执行。正确写法如下：

useEffect(() => {
  window.addEventListener("message", (e: MessageEvent) => {
    console.log(e.data);
  });
}, []);

语法错误会直接导致监听事件未被注册，自然收不到消息。

2. 确认主应用的postMessage确实执行 #

在主应用的handleLoad函数中添加日志，验证iframe加载完成后postMessage是否被调用：

const handleLoad = () => {
  console.log("iframe已加载，开始发送消息");
  // 建议替换*为子应用的具体origin，更安全且避免潜在跨域问题
  iRef.current?.contentWindow?.postMessage('hello', 'http://localhost:3001');
};

3. 验证子应用的监听时机 #

确保子应用的监听代码在页面加载时就已注册，比如放到根组件的useEffect中。如果监听代码所在组件是延迟加载的，可能会错过主应用发送的消息。

4. 检查浏览器控制台的错误信息 #

打开子应用的浏览器控制台，查看是否有语法错误、跨域相关警告或错误，这些信息能直接定位问题根源。

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