Javascript postMessage 消息

Question

像 chrome 这样的浏览器如何在窗口和它的 IFrame 之间交换数据(窗口在一个域名上，而 IFrame 从另一个域名加载内容)？

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

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

Answer 1

TLDR; 因为父窗口可以直接获取iframe的Window，所以浏览器可以使用离线的、基于事件的通信协议(protocol)进行通信。

在这种情况下不需要网络协议(protocol)，因为父窗口可以直接引用嵌入式 iframe 的 Window 对象(使用 HTMLFrameElement.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
});