Question

我有两个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的窗口中，但是我没有从{ {1}}。我的理解是，我应该能够通过listener.html对象在两个文件之间进行通信，并且window中的事件侦听器应该接收事件。知道为什么这行不通吗？

Answer 1

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

window.parent.postMessage(...)

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

1 个答案: