Javascript postMessage答案

【问题标题】：Javascript postMessageJavascript postMessage
【发布时间】：2018-01-23 13:37:45
【问题描述】：

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

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

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

【问题讨论】：

数据不需要通过网络发送，它已经在浏览器中，只需要在一个或另一个上下文中可用。
@Titus 所以即使他们在不同的服务器上，也没关系吧？不过谢谢你，因为即使是 Mozilla 文档也没有清楚地解释这一点，甚至根本没有解释

标签： javascript iframe

【解决方案1】：

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

在这种情况下不需要网络协议，因为父窗口可以直接引用嵌入 iframe 的 Window 对象（使用 HTMLIFrameElement.contentWindow，然后可以使用它来监听 MessageEvents）。

当父窗口调用otherWindow.postMessage(...)时，该消息为serialized internally并传递给otherWindow，只要iframe的Window通过注册一个message 的事件监听器如下：

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

【讨论】：

尽管我可以 100% 清楚地看到这一点，就像您解释的那样（非常顺便说一句），如果父窗口和 Iframe 窗口都在同一个域中，但是由于 IFrame 位于不同的域中，如何父窗口在没有任何网络的情况下从一台服务器发送到另一台服务器？或者说如果父级正在发送一个窗口对象，这个对象是不是被发送到服务器，而是被发送到整个加载文档的不同 JS 上下文？
引入postMessage 的原因之一是允许跨域通信，因此与不同域 iframe 的通信将与同域 iframe 的通信工作相同（除非嵌入式 iframe 不允许被嵌入）。不需要服务器通信。您可能会看到域a.com 使用postMessage 向b.com 发送消息，然后b.com 根据收到的消息向其服务器发送消息，但postMessage 本身不会通过任何服务器-- 在浏览器中都是离线的。

【解决方案2】：

您不能将 JavaScript 对象传递给 iFrame，但您仍然可以访问来自 iFrame 的元素，如下所示：

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

它将访问元素（假设一个隐藏字段）并设置您需要传递的值并在您的 iFrame 内容中使用它。

【讨论】：

您可以在 iFrame 和主窗口之间传输对象。这可以使用postMessage 来完成。 OP 正在询问这种数据传输。
@Titus 这将是这个问题的正确答案，谢谢
You cant pass a JavaScript object to an iFrame 不正确，您可以使用 postMessage 将对象发送到 Iframe。这不仅仅是读取 Iframe 中的内容，您也可以发送对象
@IbrahimD。是的，我同意你的看法，这是传递值的另一种方式

【解决方案3】：

应该能够读取全局变量。

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

应该在 iFrame 内外的任何地方都可见。

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

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

【讨论】：

localStorage 仅用于同一域