window.parent.postMessage 无法从 html 工作

问：

情况是这样的 我正在渲染一个类组件，其中存在引用 html 文件的 iframe，并希望向从 iframe 渲染的主组件发送消息，但它似乎不起作用 这是我尝试过的...... 类组件

class DemoComponent extends React.Component {
componentDidMount() {
  window.addEventListener("message", (event) => {
    console.log("Message from iframe:", event.data);
  });
}
  render() {
    return (
      <iframe
        src="path/to/your/iframe.html"
      ></iframe>
    );
  }
}

iframe.html

<script>
  window.addEventListener("DOMContentLoaded", function () {
    console.log("Message from iframe");
    window.parent.postMessage("Message from iframe", "*");
  });
window.parent.console.log("from html")
window.top.console.log("from html")
</script>

我试过这段代码

<iframe
        src="path/to/your/iframe.html"
        onLoad={(e) => {
          e.target.contentWindow.postMessage("Ready", "*");
        }}
      ></iframe>

从这里postMessage API工作正常，我能够获取消息

但我真的希望它通过html文件发生 我还尝试从放置在 iframe 中的 html 文件中记录注释，以便在渲染类组件时在浏览器控制台上看到它们，但它似乎不起作用

没有内容安全策略设置 或者请让我知道是否有其他方法可以保持 html 文件和 react 组件之间的通信

这是具有相同问题的链接 window.postMessage 无法从 iframe 到父文档，但我无法让它为组件的加载工作，而且我是相对较新的，请告诉我我的错误