如何在浏览器标签之间共享单个js资源？ [英] How is it possible to share single js resource between browser tabs?

问题描述

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

For example I want to refresh chat messages by multiple tabs with socket.io, longpolling, etc... whatever I have... For that I want to use only a single connection for all of the tabs. How can I make this? I can store the common data in localStore, cookies, etc... And I need some kind of semaphore which gives only a single synchronizer resource to one of the tabs, and after that tab is closed, it gives to another tab, etc... How is that possible? The only solution came in my mind to tell the localStore with onbeforeunload that the resource is free, but this does not work in every browser. Is there another option?

推荐答案

此问题中的关键字是标签间通信，跨窗口消息传递，等等...

The keywords in this problem is "inter-tab communication", "cross-window messaging", etc...

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

One solution is similar to long-polling: inter-tab-communication-using-local-storage/ Periodically ask the localStore/cookies for changes, and add a queue to allocate common resources (e.g. socket.io connection). You can use onbeforeunload or timeout to determine whether a tab/window is navigated away or closed. After that shortly the next tab in the queue will allocate the resource...

第二个解决方案是使用localStore存储事件。在这种情况下，您不必定期询问localStore（如果onbeforeunload事件可用）。根据这个： localStorage eventHandler不会被调用存储事件被设计为仅影响其他选项卡，所以他们是intertab沟通的好选择。唯一的问题是onunload：窗口卸载事件的本地存储。因此，由于缺乏onunload支持，第一个解决方案可能会更好。

The second solution is to use "localStore storage events" for the same. In that case you don't have to periodically ask the localStore (if onbeforeunload event is available). According to this: localStorage eventHandler Doesn't Get Called storage events are designed to affect only other tabs, so they are a good choice for intertab communication. The only problem is onunload: local storage on window unload event . So because of the lack of onunload support the first solution could be better.

第三个解决方案是使用共享webworkers，但它们还没有实现在几个浏览器（Internet Explorer）中，或者他们无法打开socket（firefox）。因此，目前它们不是一个选项，可能在修复错误后的1 - 2年后......这是一个演示 - 仅限工作铬 - html5-shared-web-worker-examples 。

The third solution would be the usage of "shared webworkers", but they have not been implemented yet in several browsers (internet explorer), or they cannot open socket (firefox). So currently they are not an option, maybe 1-2 years later after bug fixes... Here is a demo - works chrome only - html5-shared-web-worker-examples.

第四个解决方案是窗口。 postMessage ，目前尚未完成浏览器支持。我在一些sto问题中读过它，并且他们都写道postMessage不能满足我们的需求。我没有检查有关该功能的确切细节，我认为这不值得...有一个关于跨域交叉iframe通信的示例：跨域iframe通信但我想不可能进行相同的域跨窗口通信。

The fourth solution would be window.postMessage, which has not complete browser support currently. I read about it in some sto questions, and they all wrote that postMessage is not capable for what we want. I did not check the exact details about that function, it does not worth the time I think... There is an example about cross domain cross iframe communication: Cross-Domain iframe communication but same domain cross window communication is not possible with that I think.

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

The fifth solution would be using cookies but in that case every tab should ping document.cookie because there in no cookie change event, like storage event in localstore. BNC Connector uses this approach.

第六个解决方案是使用WebSQL。它的驱动程序是异步非阻塞，所以它会优于localStorage，但目前它不受firefox和msie的支持。

The sixth solution would be using WebSQL. Its driver is async non blocking, so it would be better than localStorage, but currently it is not supported by firefox and msie.

结论：

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

Nowadays - 2013.10.03 - the best option to periodically ping the localStore from the resource utilizer tabs. The other tabs should listen to the storage event of the timestamp updates. If that event does not come in time, than the resource utilizer tab has timeout, and the next tab in the queue should get the resource. Maybe later the onunload event or the shared workers will be reliable, but currently they are not good enough...

解决方案：

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

I found an implementation of the approach described in the conclusion: intercom.js I added an issue about a general interface of resource sharing, but in my case the single socket.io resource is good enough...

这篇关于如何在浏览器标签之间共享单个js资源？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！