使用IFrame时JS中postMessage功能失效问题排查

问题根源 #

1. 重复覆盖window.onmessage监听：父页面中两次赋值window.onmessage，后一个监听会完全覆盖前一个，导致只有alert类型的消息能被处理，reload消息被直接忽略。
2. postMessage目标Origin错误：子页面向父窗口发送消息时，第二个参数填了子页面自身的Origin，而非父窗口的Origin，浏览器会因Origin不匹配拦截消息。

修复步骤 #

1. 合并父页面的onmessage监听

把两个独立的window.onmessage回调合并为一个，同时处理两种消息类型：

// 父页面代码
window.onmessage = (event) => {
  const { data, source } = event;
  if (source === frameToListen.contentWindow) {
    try {
      if (data.reload) {
        window.location.reload();
      } else if (data.alert) {
        alert("HI");
      }
    } catch (e) {
      console.error(e);
    }
  }
};

2. 修正子页面postMessage的Origin参数

子页面发送消息时，第二个参数需指定父窗口的实际Origin（测试环境可临时用*，生产环境务必填写具体域名）：

// 子页面代码
function reloadPage() {
  window.parent.postMessage({ reload: true }, '父窗口实际域名');
}

function alertPage() {
  window.parent.postMessage({ alert: true }, '父窗口实际域名');
}

补充说明 #

合并监听后，父窗口能同时接收并处理两种消息类型；正确指定Origin是postMessage跨域通信的核心要求，浏览器会严格验证消息来源的合法性，错误的Origin会直接导致消息无法传递。

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