JavaScript;具有相同来源的选项卡/窗口之间的通信[重复]

Question

我有两个窗口：窗口 A 和窗口 B。

• 窗口 A 和窗口 B 具有相同的域
• 窗口 A 和窗口 B 没有任何父窗口。

1. 窗口 A 是否可以获取窗口 B 的引用？
2. 让窗口 A 通知窗口 B 的最优雅的方法是什么？ （包括新的 HTML5 规范）

我知道这样做的两种方式：

• 服务器消息：窗口 B 定期询问服务器窗口 A 是否通知了某些内容
• 本地数据消息传递 (HTML5)：当窗口 A 想要通知某事它更改了本地数据时，窗口 B 会定期检查本地数据是否有任何更改。

但是这两种方式都不是那么优雅。

例如，最好获取窗口 B 的引用并使用 window.postMessage() (HTML5)

最终目标是制作类似于 Facebook 的东西，如果您打开四个 Facebook 选项卡并在一个选项卡中聊天，则每个 Facebook 选项卡中的聊天都是最新的，这很整洁！

Answer 1

你说你的：

最终目标是制作类似于 facebook 的东西，如果你打开 4 个 facebook 标签，并在一个标签中聊天，聊天就会在每个 facebook 标签上实现，这很整洁！

这应该作为您设计的副产品发生，即视图查询模型（可能是服务器）以更新聊天，而不是您必须设计跨视图通信。除非您正在处理传输大量数据，否则为什么要担心呢？似乎它会使事情复杂化而没有巨大的收益。

几年前，我发现如果我使用现有窗口的名称和空白 URL 执行 window.open，我会得到对现有窗口的引用（这种行为甚至是 documented on MDN 和对 the MSDN docs 的评论建议它也适用于 IE；也就是说，2017 年有人在 MDN 文章中添加了a somewhat ranty note，列出了一些限制——我没有独立验证它们）。但那是几年前的事了，我不知道当今世界对它的支持有多普遍，当然，除非你所有的窗口都包含一个命名为iframe 用于通信，否则你不会有一个窗口名称可供查找，通过服务器端代码唯一命名，然后通过服务器端代码与其他窗口通信......（可怕的想法：这实际上可能是可行的。将与登录帐户相关的“当前”窗口名称存储在一个表格，将列表提供给任何创建的登录该帐户的新窗口，剔除旧的非活动条目。但如果列表稍微过时，您将在搜索其他人时打开新窗口......而且我敢打赌支持是从浏览器到浏览器的不确定性。）

Answer 2

BroadcastChannel 标准允许这样做。目前它在 Firefox 和 Chrome 中实现（caniuse，mdn）：

// tab 1
var ch = new BroadcastChannel('test');
ch.postMessage('some data');

// tab 2
var ch = new BroadcastChannel('test');
ch.addEventListener('message', function (e) {
    console.log('Message:', e.data);
});

Answer 3

我坚持使用localStorage 问题中提到的共享本地数据解决方案。就可靠性、性能和浏览器兼容性而言，它似乎是最佳解决方案。

localStorage 在所有现代浏览器中都实现了。

storage 事件在 other 选项卡更改 localStorage 时触发。这对于交流来说非常方便。

参考资料可以在这里找到：
Webstorage
Webstorage - storage event

Answer 4

除了即将推出的SharedWorker，您还可以使用cross-document messaging，它更广泛地使用supported。在这种情况下，必须有一个主窗口负责用window.open 打开所有其他窗口。然后子窗口可以在其window.opener 上使用postMessage。

如果您可以选择使用闪存，那么在任何安装了闪存的客户端 (example code) 上实际上都支持更旧的 LocalConnection。

其他备用方法：
postMessage plugin for jQuery with window.location.href fallback for older browsers
cookie-based solution for non-instant communication

Answer 5

SharedWorker 是 WHATWG/HTML5 规范，用于在选项卡之间进行通信的通用进程。

Answer 6

我有一个巧妙的方法来做到这一点，但有一些限制：您应该允许您的域的弹出窗口，并且您将始终打开一个页面（作为选项卡或作为弹出窗口），这将实现窗口之间的通信。

这是一个例子： http://test.gwpanel.org/test/page_one.html （为域启用弹出窗口后刷新页面）

这个技巧的主要特点 - 弹出窗口最后是用 url 片段“#”打开的，这迫使浏览器不改变窗口位置并存储所有数据。 剩下的工作由 window.postMessage 完成。

Answer 7

AFAIK，如果它们没有相同的父级，就不可能跨窗口进行通信。

如果它们都从父窗口打开，您应该能够获取父窗口的变量引用。

在父级中，像这样打开窗口：

childA = window.open(...);
childB = window.open(...)

在 ChildA 中，像这样访问 childB：

childB = window.opener.childA