未捕获的 TypeError：无法读取 null 的属性（读取“postMessage”），跨域帧问题

问：

我已经做了我的研究，我想我正在到达那里，但我就是不明白为什么我总是得到这个错误。

我有两个网站，我拥有不同的域，我会这样说，我可以在两边插入脚本。

Mainwebsite.com 包含来自 Secondsite.com 的 iframe。

SecondSite.com 有一个动态内容，其中可能有很长的内容，当我在 Mainwebsite.com 中加载它时，我遇到了滚动问题。Mainwebsite.com 应该自动调整 iframe 的高度，但我遇到了跨域问题。

这是我得到的：

Mainwebsite.com

 <script type="text/javascript">
       const frame = document.getElementById('secondSiteContainer');
       frame.postMessage(
          "message",
          "http://secondsite.com",
       );

  frame.postMessage("hello there!", "http://secondsite.com");
  window.addEventListener(
                   "message",
                   (event) => {
                  if (event.origin !== "http://secondsite.com") return;
                            },
                           false,
                   );
 </script>
 <div class="grid grid-col-12" id="secondSiteContainer">
   <iframe src="http://secondsite.com" title="description" width="100%" id="myIframe" style="height: 1700px; border: none;">
    </iframe>
 </div>




secondsite.com

    $( document ).ready(function() {
    console.log( "ready!" );
        window.addEventListener("message", (event) => {
        // Do we trust the sender of this message?
          if (event.origin !== "mainsite.com") return;

          event.source.postMessage(
            "hello from 2nd site!",
            event.origin,
      );
        });
    });

现在我收到错误消息：Uncaught TypeError: Cannot read properties of null (reading 'postMessage')