跨域上的 iframe 与窗口通信

Communicate to window from iframe on cross-domain

本文关键字：窗口 通信 iframe      更新时间：2023-09-26

假设我有一个域名 a.example.com 的网页，其中包含一个带有域 b.example.com 的iframe（不满足同源策略）。

现在我使用窗口打开一个新窗口，从具有相同域的 iframe 打开，即b.example.com。

我的任务是将消息发送回 iframe。

window.opener 对于打开的窗口为空。

我

读到我可以使用postMessage进行通信，但是我应该将数据发布到哪个元素。如何获取父窗口（即 iframe）的引用。

谁说iframe是你的？浏览器在这方面不能信任您，因为有人可能会弄乱您的页面并加载其他内容，因此现代浏览器完全锁定了 iframe 通信。即使使用访问控制，您也不会进行双向通信。

但是，如果你可以让 iframe 和拥有的文档"说同一种语言"，那么你可以使用 postMessage 通信：postMessage 基本上是将字符串（并且只有字符串，所以任何 JS 对象都需要 JSON.stringified）发布到"每个人都可见"的字符串桶中。任何文档上下文都可以发布消息，并且每个上下文都可以决定是否发布新消息。如果是，则可以使 iframe 发送所属窗口可以解析的消息，反之亦然。

为了使他们的网站（其中包含您控制其内容iframe）从通过单击内容中的某些内容打开的窗口中获取信息，他们必须允许访问您的网站。如果您只想从通过单击您控制的页面上的某些内容打开的窗口中获取数据，则如下所示：

var newWindow = open('yourURL.php');
var someElement = newWindow.document.getElementById('someId');
console.log(someElement.value); // assuming it's an input

如果您想从新打开的窗口中打开另一个页面的页面获得信息，如下所示：

var openerElement = opener.document.getElementById('openerWindowId');
console.log(openerElement.innerHTML); // assuming it's not an input
相关文章：