iFrame postMessage 和 addEventListener 不起作用答案

【问题标题】：iFrame postMessage and addEventListener not workingiFrame postMessage 和 addEventListener 不起作用
【发布时间】：2020-03-17 15:06:54
【问题描述】：

在阅读了多篇 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 中使用的页面的源代码？

【问题讨论】：

标签： javascript html iframe postmessage

【解决方案1】：

当您在 frame 的 contentWindow 上调用 postMessage 时，您正在向 iFrame 发送一条消息，我相信您打算这样做。

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

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

【讨论】：

感谢您的回复。那么，如果我无权访问源代码，是否无法从 iFrame 中控制台日志？
正确。没有办法做到这一点。这是因为，如果可以的话，您将能够访问潜在的敏感信息。想象一下，有一个（隐藏的）iFrame 到 facebook.com，然后让 facebook.com 访问所有用户的私人信息并将其发送回父网站！这就是 PostMessage 机制存在的原因，所以页面只给出他们明确想要注意的信息，如果你有一个 iFrame 到一个与父级具有 same host 的页面，你实际上有完整的访问，不需要依赖postMessage
对，这是有道理的。我一直都在脑海里。想一想，这可能是不可能的，也不应该是。大声笑再次感谢！获得正确答案。