从 iframe 发出的消息上的 window.addEventListener答案

【问题标题】：window.addEventListener on a message emitted from an iframe从 iframe 发出的消息上的 window.addEventListener
【发布时间】：2019-02-04 15:51:33
【问题描述】：

我有两个 html 文件。第一个叫做post.html，它在窗口上注册一个事件监听器并向窗口发布消息：

<html>
    <head>
        <script>
            window.addEventListener("message", function(event) {
                console.log("found event in post!", event)
            }); 
            window.postMessage({
               'data': ["some data"]
            },"*");   
        </script>
    </head>
    <body>
    </body>
</html>

我有第二个名为 listner.html 的 html 文件，它只监听来自窗口的消息并将 post.html 作为 iframe 加载：

<html>
    <head>
        <script>
            window.addEventListener("message", function(event) {
              console.log("event found in listen!", event)
            }); 
        </script>
    </head>
    <body>
        <iframe src="post.html"></iframe>
    </body>
</html>

如果我加载listener.html，我会收到日志，表明post.html 中的事件侦听器检测到post.html 中的窗口发布的消息，但我没有从listener.html 获得任何日志。我的理解是我应该能够通过两个文件之间的window 对象进行通信，listener.html 中的事件侦听器应该接收到该事件。知道为什么这不起作用吗？

【问题讨论】：

标签： javascript html iframe addeventlistener postmessage

【解决方案1】：

post.html 将消息发布到它自己的窗口，而不是包含listener.html 的窗口

window.parent.postMessage(...)

【讨论】：