相关疑难解决方法(0)

浏览器标签/窗口之间的Javascript通信

在同一浏览器的选项卡/窗口之间进行Javascript通信的最可靠方法是什么?例如,当Tab 2开始音频播放时,Tab 1以某种方式知道这一点并且可以暂停它的播放器.

我正在建立一个带有音乐播放器的网站...所以,如果你打开两个标签到网站,你可以在两者上开始播放音乐.这显然很糟糕,所以我试图找到一个解决方案.

有任何想法吗?谢谢

javascript browser

144
推荐指数
8
解决办法
13万
查看次数

标签或窗口之间的通信

我正在寻找一种方法,如何在浏览器中的多个选项卡或窗口之间进行通信(在同一个域上,而不是CORS),而不留痕迹.有几个解决方案:

  1. 使用窗口对象
  2. 的postMessage
  3. 饼干
  4. localStorage的

第一个可能是最糟糕的解决方案 - 你需要从当前窗口打开一个窗口,然后只要你打开窗户就可以进行通信.如果您在任何窗口中重新加载页面,则很可能会丢失通信.

第二种方法,使用postMessage,可能启用跨源通信,但遇到与第一种方法相同的问题.您需要维护一个窗口对象.

第三种方式,使用cookie,在浏览器中存储一些数据,这可以有效地看起来像向同一域上的所有窗口发送消息,但问题是你永远不知道所有标签是否已经读过"消息"打扫干净.您必须实现某种超时以定期读取cookie.此外,您受限于最大cookie长度,即4KB.

使用localStorage的第四种解决方案似乎克服了cookie的限制,甚至可以使用事件进行监听.接受的答案中描述了如何使用它.

编辑2018:接受的答案仍然有效,但现代浏览器有一个更新的解决方案,使用BroadcastChannel.有关如何使用BroadcastChannel在选项卡之间轻松传输消息的简单示例,请参阅其他答案.

javascript browser html5 ipc broadcast-channel

136
推荐指数
7
解决办法
7万
查看次数

sessionStorage和localStorage的范围

我阅读了有关sessionStorage和localStorage的一些文档,但我不明白范围是什么:域,特定页面?

例如,如果我有以下页面:

http://example.com/products.aspx?productID=1

http://example.com/products.aspx?productID=2

http://example.com/services.aspx?serviceID=3

如果我在上面的每个页面上运行(idvalue是查询字符串中的值):

localStorage.setItem('ID',idvalue);
Run Code Online (Sandbox Code Playgroud)

我最终会存储3个不同的值,或者值是否会相互覆盖?

javascript html5 local-storage sessionstorage

98
推荐指数
2
解决办法
7万
查看次数

JavaScript的; 具有相同来源的标签/窗口之间的通信

我有两个窗口:窗口A和窗口B.

  • 窗口A和窗口B具有相同的域
  • 窗口A和窗口B没有任何父窗口.

问题:

  1. 窗口A是否可以获得窗口B的引用?
  2. 什么是最优雅的方式使窗口A通知窗口B?
    (包括新的HTML5规范)

我知道这样做的两种方式:

  • 服务器消息传递:窗口B常规询问服务器窗口A是否已通知某事
  • 通过本地数据进行消息传递(HTML5):当窗口A想要通知它改变本地数据的东西时,窗口B定期检查本地数据是否有任何变化.

但这两种方式并不那么优雅.
例如,获得窗口B的引用并使用window.postMessage()(HTML5)会很不错

最终的目标是制作像facebook这样的东西,如果你打开4个Facebook标签并在一个标签中聊天,聊天是最新的每个Facebook标签,这是整洁的!

javascript html5 web-applications postmessage local-storage

69
推荐指数
3
解决办法
6万
查看次数

服务工作者内部长时间运行的过程(或类似的东西)

我有一个客户端JS应用程序,它使用IndexedDB来存储其状态.工作良好.但是,它有点慢,因为我经常读取和写入IndexedDB,以便在打开多个选项卡时状态不会变得不一致.

我的想法是......将所有数据库访问内容放入Service Worker中,然后我可以在内存中缓存值,而不必担心另一个选项卡可能已经更改了数据库.

这似乎工作正常,除了我的应用程序的某些部分需要很长时间才能运行.我可以将服务工作者的状态(例如"X%done")传达给我的UI.但是如果它运行超过30秒,Firefox和Chrome似乎都会杀死它,这对我来说太短了.

这种限制有什么办法吗?如果没有,任何实现类似的想法?我认为共享工作者可以做到这一点,除了浏览器支持很差,我现在预计服务工作者背后的动力不会改善.

javascript web-worker service-worker

10
推荐指数
2
解决办法
693
查看次数

如何在运行相同 GreaseMonkey 用户脚本的 2 个选项卡之间传递信息?

我编写了一个在浏览器 (FireFox) 选项卡中运行的GreaseMonkey (javascript) 用户脚本www.site1.com/stuff。另一个选项卡指向www.site1.com(没有stuff),并且不是第一个的子窗口(例如,不是通过在第一个选项卡上运行的用户脚本打开的)。用户脚本(独立?)在两个选项卡上运行。

我希望第一个浏览器选项卡上的用户脚本执行将字符串变量传递给第二个浏览器选项卡。虽然GM_setValue并且GM_getValue在单个用户脚本中的存储/检索工作良好,但该存储区域似乎无法被用户脚本的其他执行访问。localStorage遭受同样的失败。对于一个明确的例子:

  • 当用户脚本检测到它正在运行时www.site1.com/stuff,它会将一个值放入存储中: GM_setValue('parValue', 'aaabbbccc');

  • 在第一个选项卡完全加载并有足够的时间将此值放入存储后,将手动打开第二个选项卡。当用户脚本检测到第二个选项卡正在运行www.site1.com(没有stuff)时,代码会尝试检索值: var parVal = GM_getValue('parValue')。在我的用户脚本中,parVal 会有一个null值;每个用户脚本执行似乎使用不同的存储区域。

我如何实现这个看似简单的任务,即在以下约束下从公共存储区域安全/检索同一用户脚本的两个执行:
* 第stuff一个选项卡的 URL 末尾可以由用户随意更改(为每种可能的stuff可能性编写单独的用户脚本是不可能的)。
* 标签永远不会有父/子关系,因为它们是独立生成的(从技术上讲,第二个标签是第一个标签的孙子,但我不知道这两个标签的窗口名称是什么或如何引用它们在代码中)。
* 使用在GreaseMonkey 用户脚本中运行的 javascript

是否有某种可以使用的全局交叉表存储区域,可以在GreaseMonkey 用户脚本中实现?理论上应该GM_setValue适用于这种情况吗?我花了大量时间研究以下相关 SO 问题的答案,但无法找到适用于上述条件集和/或可以实现到GreaseMonkey 用户脚本的解决方案:选项卡或窗口之间的通信Javascript :在选项卡之间共享数据https : //superuser.com/questions/1005448/can-a-greasemonkey-script-know-whats-been-loaded-into-another-tab ,使用向所有打开的窗口/选项卡发送消息JavaScript的

javascript greasemonkey parameter-passing local-storage

3
推荐指数
1
解决办法
1656
查看次数