MessageChannel传参后iframe侧ports为空数组，求排查思路

我尝试通过以下代码向内部iframe发送消息：

const { port1, port2 } = new MessageChannel();
port1.addEventListener('message', ({ data }: MessageEvent) => res(data));
contentWindow?.postMessage({ event: `the-event`, payload }, '*', [port2]);

iframe侧的代码如下：

const onMessageListener = ({ data, ports }) => {
  const { event, payload } = data;
  if (event === 'the-event') {
    console.log(data, ports); // "ports" is empty array
    state.payload = payload;
  }
};
window.addEventListener('message', onMessageListener);

但在iframe侧获取到的ports变量为空数组，请问可能的原因是什么？

• iframe未完成加载就发送消息
  如果在iframe的load事件触发前调用postMessage，此时iframe的window对象还未完全初始化，浏览器无法完成端口的传递逻辑。需要确保iframe加载完成后再发送消息，比如监听iframe的load事件：

  const iframe = document.getElementById('target-iframe');
  iframe.addEventListener('load', () => {
    const { port1, port2 } = new MessageChannel();
    port1.addEventListener('message', ({ data }) => res(data));
    iframe.contentWindow?.postMessage({ event: `the-event`, payload }, '*', [port2]);
  });
  

• 跨域限制导致端口被拦截
  MessageChannel端口的传递要求发送方和接收方必须同源（协议、域名、端口完全一致）。即使是内部iframe，如果主页面和iframe的源不一致，浏览器会安全拦截端口传递，导致接收方拿到空数组。需要确保两者同源，或者在跨域场景下改用其他通信方式。

• 目标窗口对象错误
  如果contentWindow并非目标iframe的真实window对象（比如iframe被多层嵌套、或者获取了错误的DOM元素），端口无法正确传递。需要确认contentWindow确实指向目标iframe的window对象，比如通过document.getElementById('iframe-id').contentWindow获取。

• 浏览器兼容性问题
  部分旧版浏览器对MessageChannel的端口传递支持不完善，比如某些旧版Chrome或Firefox。建议在最新版主流浏览器中测试，排查是否是浏览器版本导致的问题。

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