Javascript postMessage

Question

像 chrome 这样的浏览器如何在窗口与其 IFrame 之间交换数据（窗口位于 1 个域名上，IFrame 从另一个域名加载内容）？

我的问题是，浏览器如何将 JS 对象发送到 IFrame？是通过 HTTP 请求还是其他网络协议完成的？

我在 Chrome 的网络选项卡中看不到它，这就是我想知道的原因

Answer 1

TLDR;因为父窗口可以直接获取iframe的

Window

，浏览器可以使用离线的、基于事件的通信协议进行通信。

在这种情况下不需要网络协议，因为父窗口可以直接引用嵌入的 iframe 的

Window

对象（使用

HTMLIFrameElement.contentWindow

，然后可以使用它来监听

MessageEvent

）。

当父窗口调用

otherWindow.postMessage(...)

时，该消息为

serialized internally

并传递给

otherWindow

，只要 iframe 的

Window

通过注册一个对象来监听

MessageEvent

，它就会自动反序列化该对象。 message

的事件侦听器

，如下所示：

window.addEventListener("message", function(event) {
    // passed offline using serialization algorithm specified in spec (2.9.1)
    console.log(event.data); // contains deserialized object
});

Answer 2

您无法将 JavaScript 对象传递给

iFrame

，但您仍然可以从

iFrame

访问元素，如下所示：

$('#iframeId').contents().find('iframe').contents().find('#element');

它将访问该元素（假设一个隐藏字段）并设置您需要传递的值并在您的

iFrame

内容中使用它。

Answer 3

应该能够读取全局变量。

<script>var masterOfTheUniverse = "He-Man";</script>

从 iFrame 内外的任何位置都应该可见。

或者，您可以使用浏览器存储

// Store
localStorage.setItem("masterOfTheUniverse", "He-Man");
// Retrieve
localStorage.getItem("masterOfTheUniverse");