如何为特定iframe绑定postMessage的message事件监听器

其实你完全不用纠结修改现有监听器的问题，咱们可以换个思路——在新的message监听器里精准过滤来自目标iframe（也就是你的app B）的消息就行，其他来源的消息直接跳过，不会干扰现有逻辑。

具体操作步骤很简单：

• 首先在父页面里获取到目标iframe的DOM引用，比如给承载app B的iframe加个id，然后用getElementById拿到它：

// 假设承载app B的iframe设置了id为"app-b-iframe"
const appBIframe = document.getElementById('app-b-iframe');

• 然后在你的message事件回调里，通过event.source来判断消息来源——这个属性对应的就是发送消息的窗口对象，正好和目标iframe的contentWindow是同一个东西：

function handleAppBMessage(event) {
  // 只处理来自app B所在iframe的消息
  if (event.source === appBIframe.contentWindow) {
    // 这里写你处理app B发来数据的逻辑
    console.log('收到app B的消息:', event.data);
    // 比如更新父页面的状态、渲染数据等等
  }
  // 其他来源的消息会直接被忽略，不影响其他监听器的正常工作
}

window.addEventListener("message", handleAppBMessage, false);

另外提醒一句，之前你用'*'作为postMessage的目标域虽然方便，但安全性不高，最好换成父页面的具体域名，比如：

// 在app B里发送消息时指定父域名
window.parent.postMessage(yourData, 'https://your-parent-app-domain.com');

这样一来，既不用动现有任何监听器，又能精准捕获来自app B的消息，完美解决你的问题～

备注：内容来源于stack exchange，提问作者infodev