javascript:监听来自特定 iframe 的 postMessage 事件

Question

我在一个页面中有多个 iframe。现在我有一个页面的 message 事件监听器，它从所有 iframe 获取消息。我有一个解决方法来了解消息来自哪个 iframe。

我想分别为每个 iframe 创建事件监听器。这可能吗？

Answer 1

您必须监听 window 对象的全局 message 事件，但您可以使用 source 过滤源 iframe MessageEvent的属性(property).

例子:

const childWindow = document.getElementById('test-frame').contentWindow;
window.addEventListener('message', message => {
    if (message.source !== childWindow) {
        return; // Skip message in this event listener
    }

    // ...
});