javascript - 如何在浏览器选项卡之间共享单个 js 资源？

Question

例如，我想使用 socket.io、longpolling 等通过多个选项卡刷新聊天消息……无论我有什么……为此，我只想对所有选项卡使用一个连接。我该怎么做？我可以将公共(public)数据存储在 localStore、cookies 等中......我需要某种信号量，它只为其中一个选项卡提供一个同步器资源，并且在该选项卡关闭后，它提供给另一个选项卡，等等。 .. 这怎么可能？我想到的唯一解决方案是使用 onbeforeunload 告诉 localStore 该资源是免费的，但这并不适用于所有浏览器。还有其他选择吗？

Answer 1

本题的关键词是“标签间通信”、“跨窗口消息传递”等……

一个解决方案类似于长轮询:inter-tab-communication-using-local-storage/定期向 localStore/cookies 请求更改，并添加一个队列来分配公共(public)资源(例如 socket.io 连接)。您可以使用 onbeforeunload 或 timeout 来确定选项卡/窗口是导航离开还是关闭。不久之后，队列中的下一个选项卡将分配资源...

第二种解决方案是使用“localStore 存储事件”。在这种情况下，您不必定期询问 localStore(如果 onbeforeunload 事件可用)。根据这个:localStorage eventHandler Doesn't Get Called存储事件被设计为仅影响其他选项卡，因此它们是选项卡间通信的不错选择。唯一的问题是卸载:local storage on window unload event .因此，由于缺少 onunload 支持，第一个解决方案可能会更好。

第三种解决方案是使用“共享网络 worker ”，但它们尚未在多种浏览器(Internet Explorer)中实现，或者它们无法打开套接字(Firefox)。所以目前它们不是一个选项，可能在错误修复后 1-2 年后......这是一个演示 - 仅适用于 chrome - html5-shared-web-worker-examples .

第四个解决方案是 window.postMessage ，目前还没有完整的浏览器支持。我在一些 sto 问题中读到了它，他们都写道 postMessage 不能满足我们的需求。我没有检查有关该功能的确切细节，我认为它不值得花时间...有一个关于跨域跨 iframe 通信的示例:Cross-Domain iframe communication但我认为同域跨窗口通信是不可能的。

第五种解决方案是使用 cookie，但在这种情况下，每个选项卡都应该 ping document.cookie，因为没有 cookie 更改事件，例如 localstore 中的存储事件。 BNC Connector使用这种方法。

第六种解决方案是使用 WebSQL。它的驱动是异步非阻塞的，所以它会比localStorage更好，但是目前firefox和msie不支持。

结论:

现在 - 2013.10.03 - 从资源利用器选项卡定期 ping localStore 的最佳选择。其他选项卡应该监听时间戳更新的存储事件。如果该事件没有及时到来，则资源利用者选项卡超时，队列中的下一个选项卡应该获取资源。也许以后 onunload 事件或 shared workers 会可靠，但目前它们还不够好......

解决方法:

我找到了结论中描述的方法的实现: intercom.js我添加了一个 issue关于资源共享的通用接口(interface)，但就我而言，单个 socket.io 资源就足够了......