合作页面之间的跨域、跨标签通信答案

【问题标题】：Cross-domain, cross-tab communication between co-operating pages合作页面之间的跨域、跨标签通信
【发布时间】：2015-01-29 19:41:41
【问题描述】：

假设我有两个选项卡，每个选项卡都有一个加载到不同域的网页。两个选项卡中的页面想要交流。

我能看到的最简单的解决方案是this one（我在搜索重复项时发现的一个密切相关的问题的答案），其中一个或两个页面加载中间页面 iFrame， postMessage() 和 localStorage 事件之间的代理。但是，这确实需要将此页面托管在某个地方，并且需要客户端的额外请求。

是否有任何技术不需要专门的“代理页面”由其中一个域提供服务？（也就是说，这可以通过没有支持服务器的 JavaScript 库来实现？）

【问题讨论】：

Communication between tabs or windows的可能重复
不是重复的。这里的问题是关于跨域的。
为什么需要两个域？没有支持服务器？（不可能）
@btzr - 绝对不是不可能的！我实际上链接到问题中的一个解决方案，它根本不需要任何服务器端组件（所涉及的所有站点都可以是 100% 静态的，只使用客户端 JS）。但是，我链接的解决方案需要一个额外的 HTML 页面（在 iFrame 中加载）来充当代理，我想知道是否有更优雅的解决方案。
@cloudfeet 也许你可以在github.com/wingify/across-tabs 找到有用的东西——我不确定他们是如何实现它的，但它似乎是对这个挑战的一个非常深入的实现。

标签： javascript cross-domain local-storage postmessage

【解决方案1】：

这个 javascript 库似乎提供了您正在寻找的功能（即，支持浏览器选项卡之间的跨域通信）。我还没有使用这个，但会在我的应用程序中尝试这个。查看https://github.com/wingify/across-tabs。

【讨论】：

你试过了吗？它奏效了吗？如果其中一个选项卡不是另一个选项卡的打开器，它是否支持跨域通信？
从文档中，这假定一个父选项卡可以打开所有其他选项卡，这不是我想要的。

【解决方案2】：

window.PostMessage API 正是您所需要的。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

window.postMessage() 方法可以安全地启用 Window 对象之间的跨域通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的 iframe 之间。

【讨论】：

我知道postMessage （并在我的问题中提到过），但它只能在页面之间存在父/子关系时使用 - 如您引用的文本。我正在考虑独立打开两个标签。

【解决方案3】：

我可能会选择创建一个后端 API 服务作为两个不同网站之间的公共通信隧道。

例如。 Site-A send a POST message to https://your-API-service When Site-B asks for an update to https://your-API-service Then API service returns the message previously sent from Site-A 如果您需要实时通信，您还可以使用 WebSockets 或推送通知

【讨论】：

它可以只用静态 HTML 文件完成（请参阅我的问题中的链接） - 与此相比，后端 API 只会增加复杂性和浪费带宽，而你'使用静态 HTML 解决方案会更好。