是否存在针对多个浏览器选项卡和较新浏览器的客户端状态的开源JavaScript库?[关闭]


11

HTML5有一些新功能,使其成为最近的浏览器,允许在选项卡,浏览器窗口,相同的域窗口等之间共享状态。因此,编写在Web上保持很多状态的Web应用程序可能会变得容易一些。客户端,并且还可以智能地管理选项卡和/或窗口之间的状态。

当前有诸如Backbone.js之类的库,可以帮助管理单个选项卡或单个窗口中的状态。是否有任何东西可以帮助多个选项卡(或窗口)管理全局状态,特定于选项卡的状态以及交叉表事件,而无需依赖服务器来同步它们?


2
某些Web应用程序(例如Trello)通过仅使用WebSockets同步所有客户端(无论是否在同一浏览器中)来绕过此操作。但这可能很有用。如果我正在编写这样的库,那么我会在SharedWorkers的polyfill上做一个薄层,因为SharedWorkers在这里做了很多您需要的工作,但还没有得到很好的支持。使此工作正常进行的一个技巧是localStorage事件,即使独立打开选项卡也会触发该事件。
mahemoff '02

1
我的大学老师教我了HTTP is great (and beutiful) because it is stateless。自从我加入这个行业以来,我一直在寻找那个美丽的地方,但找不到它。每个人都只谈论保持看到的状态!
Dipan Mehta'3

@DipanMehta:如果您看一下RFC2616,我不确定您是否同意您的老师的“美容”部分:)尽管我会告诉您“纯粹无状态”的想法确实很棒,但我发现有问题我们正在屠杀...
haylem 2012年

无状态和Web应用程序不能很好地结合在一起。小事,例如以进位状态登录。不错,如果您只是将小文件提供给要求它们的任何人,我想。
psr 2012年

我写了一个很小的库,使用HTML5技巧在您网站的所有打开的选项卡之间进行通信。
卡非他明

Answers:


3

简短答案:

您无法真正将状态信息从一个选项卡传递到另一个选项卡...

长答案:

您不能真正将状态信息从一个选项卡传递到另一个选项卡,因为这将严重违反沙箱和安全性。

但是,您可以通过以下方式在两个选项卡之间间接传递状态:

另一种选择是简单地通过Cookie进行通信,以在2个标签之间传递信息,但这很可能会引起问题,高度依赖于浏览器,并且需要重新加载页面(老实说,我从未尝试过这样做,只是想到了,但其他人做了

因此,由于浏览器扩展显然是一个相当有限的路径,因此您应该采用客户端与服务器之间的通信方式,并开发一种系统,以允许客户端将事件发布到服务器,然后重新分发事件(或任何其他类型的广播)通过您选择的通信协议与其他客户联系。


更新1: 正如某人在删除评论之前在评论中提到的(由于该评论未在收件箱中显示,因此无法获得赠送金额,对不起)

HTML5引入了window.postMessageAPI。

有关工作示例,请参见John Resig在Cross-Window Messaging上的博客文章。而且非常有趣的是,如果您查看这篇文章中的评论,您会发现一个叫Malte的人提到他们编写的要在现代浏览器中使用的window.postMessage,或者在较旧的浏览器中基于cookie的版本。

阅读这些以获取更多详细信息和示例:

更新2:

请记住,由于2012年5月4日,HTML5规范仍然是草案,因此某些功能可能会被删除。因此,请谨慎使用 ...


我显然是错的,因为HTML5确实引入了window.postMessage API。
Haylem 2012年

另外,如果您阅读John Resig在Cross-Window Messaging上的博客文章和评论,您会注意到一个叫Malte的人提到了他们写的[library] [3],以便在现代浏览器中使用它,或者是基于cookie的版本较旧的浏览器,所以我的cookie并不是那么疯狂。
Haylem 2012年

3

我最近发现了Intercom,它使用本地存储在Windows之间实现广播消息传递。onstorage数据更改时,本地存储会触发事件(),因此无需轮询。对讲机允许域中的所有页面进行通信,而不管它们如何打开。


1

如果您的窗口(页面)来自相同的域(来源),localStorage则可用于共享数据和广播消息。您应该考虑的一件事是,每个浏览器窗口(页面)都在单独的线程中工作。因此,如果我们在谈论跨窗口通信,那么我们也在谈论多线程。

您还应该考虑localStorageIE的一些问题:

  • 我已经对IE8中的localStorage执行了一些测试。对localStorage进行数千次更改后,来自相同源的Windows停止接收“存储”事件。甚至更多,然后您尝试从同一个localStorage项中读取,在不同的窗口中值可能会有所不同。所以,我要说IE8不支持localStorage

  • 即使从此窗口更改了localStorage,IE9和IE10也会调用“存储”事件处理程序(这违反规范)。

  • IE11也存在已知问题

我最近发布了窗口间通信库(所有功能均在自述文件中进行了描述)。它提供线程安全的数据共享,事件广播。它还解决了一些IE问题(绝对不支持IE8,只有通过IE修复-等待IE11更新,才能解决在不同原始父级中具有iframe的IE11错误)。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.