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

Posted 2023-02-24

【中文标题】如何在浏览器选项卡之间共享单个 js 资源？

【英文标题】：How is it possible to share single js resource between browser tabs?

【发布时间】：2013-10-08 04:21:45

【问题描述】：

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

【问题讨论】：

每个标签页是单独的 url 吗？

如果没关系我为什么要问它？

标签中的url不一定不同，但可以。因此，您不能使用 url 来识别选项卡。顺便说一句，使用 Math.random 为每个选项卡生成唯一 id 更容易，所以这个问题并没有真正帮助......

【参考方案1】：

这个问题的关键词是“标签间通信”、“跨窗口消息传递”等...

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

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

第三种解决方案是使用“共享网络工作者”，但它们尚未在多个浏览器（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 事件或共享工作者将是可靠的，但目前它们还不够好......

解决方案：

我找到了结论中描述的方法的实现： intercom.js 我添加了一个关于资源共享通用接口的issue，但在我的情况下，单个 socket.io 资源就足够了......

【讨论】：

localStorage support 与 postMessage support。 localStorage 支持除 Opera Mini 之外的所有内容，同源 postMessage 支持除 IE 8-9 之外的所有内容，因此取决于您的目标受众，哪个更可取。

哈哈谁的目标是opera mini？ :D

根据StatCounter，Opera 在移动端的市场份额约为 15%（和 IE8/9 在桌面端的市场份额差不多）。在开发以移动为中心的应用程序时，我不会随便忽略这个数字。