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

Question

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

Answer 1

此问题中的关键字是“选项卡间通信”，“跨窗口消息传递”等。

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

第二种解决方案是使用“ localStore存储事件”。在这种情况下，您不必定期询问localStore（如果有onbeforeunload事件可用）。据此：localStorage eventHandler不会被调用存储事件旨在仅影响其他选项卡，因此它们是选项卡间通信的理想选择。唯一的问题是onunload：窗口上的本地存储卸载事件。因此，由于缺少onunload支持，第一个解决方案可能会更好。

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

第四个解决方案是window.postMessage，当前尚不完全支持浏览器。我在一些问题中读到它，他们都写道postMessage无法满足我们的需求。我没有检查有关该函数的确切详细信息，这不值得我花时间...有一个有关跨域跨iframe通信的示例：跨域iframe通信，但是我无法进行相同域跨窗口通信认为。

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

第六个解决方案是使用WebSQL。它的驱动程序是异步非阻塞的，因此它会比localStorage更好，但是目前Firefox和msie不支持它。

结论：

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

解：

我找到了结论中描述的方法的一个实现： intercom.js 我添加了一个有关资源共享通用接口的问题，但就我而言，单个socket.io资源就足够了……