来自同一域的两个 iframe 之间使用 postMessage 进行通信答案

【问题标题】：Communication between two iframes from the same domain with postMessage来自同一域的两个 iframe 之间使用 postMessage 进行通信
【发布时间】：2011-10-01 19:51:15
【问题描述】：

我有两个来自同一个域的 iframe，它们托管在另一个域的文档中。问题是这些 iframe 无法通过 postMessage 相互通信。我什至无法从 iframe2 访问 iframe1 的 DOM，即使它们属于同一个域。有什么解决办法吗？？？？

我使用以下选项来引用所需的 iframe。

parent.frame[x]

我尝试了以下几行来访问 iframe 的 DOM

parent.frame[x].contentWindow returns null,

parent.frame[x].document.getElementsByTagName("body") returns null

更新：

我想我的问题还不够清楚。 postMessage api没有问题，实际问题是浏览器围绕iframe文档创建了一个自定义框架集，在我的例子中！

所以parent.frame[x] 不会指向 iframe 窗口，而是指向 iframe 窗口内的自定义框架集。

以下问题很好地解释了问题。

Prevent browser from loading a custom frameset in an iframe's document

【问题讨论】：

标签： html iframe same-origin-policy postmessage

【解决方案1】：

如果要跨窗口同域通信，可以通过localStorage进行设置。当您向localStorage 添加项目时，您会在同一域的所有其他窗口/iframe/选项卡中获得窗口"storage" 事件。

因此，您基本上将localStorage.setItem('name', 'value') 放在一个 iframe 中，同时您收听 window.addEventListener('storage', (event) => {/* handle message */}) 并收到消息。

【讨论】：

先生，4 年后，您的解决方案让我摆脱了绝望。这太棒了，就像一个魅力:)

【解决方案2】：

请看下面对postMessage 函数的描述以及如何使用它。因此，在 frame1 中调用 postMessage 方法，在 frame2 中订阅通知。显然你使用的浏览器必须支持这个 API。

还有一个非常棒的jQuery plugin，它封装了这个API并简化了它的使用。它也适用于不支持 postMessage 方法的浏览器，方法是使用 url 的哈希部分。

【讨论】：

@sawren，是的，他们可以，即使他们在不同的域中。
@DarinDimitrov，不，当然不是。 OP 询问两个子 iframe 如何相互通信。仅使用 postMessage，他们不能，因为他们无权访问父级的 DOM，并且他们看不到对方，并且父级无法将对 iframe 的引用传递到另一个 iframe。我建议在父级中的两个 iframe 之间设置 RPC（如果这些 iframe 是 SDK 的一部分，您将其集成到父级中）。或者只是使用 localStorage 和窗口存储事件（最简单的解决方案）。