Question

阅读了多个SO文章之后，我了解在iFrame上使用javascript的最佳（或唯一）方法是通过postMessage和addEventListener。我在网上找到的所有示例代码都显示如下内容：

<div id="magazine-container">
    <iframe id="iFrame" height="500" width="700" src="https://issuu.com/lideres_mexicanos/docs/351grupoaries-issuu/76"></iframe>
</div>

<script>
    $(document).ready(function () {
        let testString = 'MESSAGE FROM LOCALHOST';
        let frame = document.getElementById('iFrame');
        frame.contentWindow.postMessage(testString, '*');

        window.addEventListener('message', event => {
            console.log(event.data);
        });
    });
</script>

在控制台中，event.data不包含变量testString。相反，它包含以下内容：

{"PrivacyManagerAPI":{"timestamp":1584457115641,"action":"getConsent","self":"quantserve.com","domain":"issuu.com","authority":"truste.com","type":"advertising"}}

我只是不知道这是怎么回事。

修改

我现在知道我不是将addEventListener附加到iFrame，而是附加到父框架。有没有一种方法可以将侦听器添加到实际的iFrame中，而无需访问iFrame中使用的页面的源代码？

Answer 1

当您在框架的contentWindow 上调用postMessage时，您正在向iFrame发送一条消息，这正是我所希望的。

但是，您要将事件侦听器添加到父窗口（又名window），不是iframe的内容窗口。 console.log正在发送的消息不是您发送的消息，而是页面正在接收的另一条消息。这可能是对您发送的消息的响应，或者是您在浏览器中安装的插件发送的消息。

要实现父级与子级iFrame通信的功能，您必须有权访问iframe的源代码，以便可以在其中附加事件处理程序，或者使用已设置了定义的API的目标。 / p>

iFrame postMessage和addEventListener不起作用

1 个答案: