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

问题描述

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

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 storage events".在这种情况下，您不必定期询问 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.

第三个解决方案是使用共享网络工作者"，但它们尚未在多个浏览器(Internet Explorer)中实现，或者它们无法打开套接字(firefox).所以目前他们不是一个选择，也许在错误修复后 1-2 年后......这是一个演示 - 仅适用于 chrome - 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.

第四个解决方案是 window.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 更改事件，例如 localstore 中的存储事件.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 的最佳选择.其他选项卡应侦听时间戳更新的存储事件.如果该事件没有及时到来，则资源利用者选项卡超时，队列中的下一个选项卡应该获取资源.也许以后 onunload 事件或共享 worker 会可靠，但目前它们还不够好......

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屋！