具有相同来源的选项卡/窗口之间的通信

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 选项卡中都是最新的，这很好！

原文由 brillout 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

storage 事件在 其他 选项卡对 localStorage 进行更改时触发。这对于通信目的来说非常方便。

可以在这里找到参考资料：

网络存储

Webstorage - 存储事件

原文由 brillout 发布，翻译遵循 CC BY-SA 3.0 许可协议

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);
});

原文由 Joel 发布，翻译遵循 CC BY-SA 3.0 许可协议