在同一浏览器的选项卡/窗口之间进行Javascript通信的最可靠方法是什么?例如,当Tab 2开始音频播放时,Tab 1以某种方式知道这一点并且可以暂停它的播放器.
我正在建立一个带有音乐播放器的网站...所以,如果你打开两个标签到网站,你可以在两者上开始播放音乐.这显然很糟糕,所以我试图找到一个解决方案.
有任何想法吗?谢谢
我正在寻找一种方法,如何在浏览器中的多个选项卡或窗口之间进行通信(在同一个域上,而不是CORS),而不留痕迹.有几个解决方案:
第一个可能是最糟糕的解决方案 - 你需要从当前窗口打开一个窗口,然后只要你打开窗户就可以进行通信.如果您在任何窗口中重新加载页面,则很可能会丢失通信.
第二种方法,使用postMessage,可能启用跨源通信,但遇到与第一种方法相同的问题.您需要维护一个窗口对象.
第三种方式,使用cookie,在浏览器中存储一些数据,这可以有效地看起来像向同一域上的所有窗口发送消息,但问题是你永远不知道所有标签是否已经读过"消息"打扫干净.您必须实现某种超时以定期读取cookie.此外,您受限于最大cookie长度,即4KB.
使用localStorage的第四种解决方案似乎克服了cookie的限制,甚至可以使用事件进行监听.接受的答案中描述了如何使用它.
编辑2018:接受的答案仍然有效,但现代浏览器有一个更新的解决方案,使用BroadcastChannel.有关如何使用BroadcastChannel在选项卡之间轻松传输消息的简单示例,请参阅其他答案.
我阅读了有关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个不同的值,或者值是否会相互覆盖?
我有两个窗口:窗口A和窗口B.
问题:
我知道这样做的两种方式:
但这两种方式并不那么优雅.
例如,获得窗口B的引用并使用window.postMessage()(HTML5)会很不错
最终的目标是制作像facebook这样的东西,如果你打开4个Facebook标签并在一个标签中聊天,聊天是最新的每个Facebook标签,这是整洁的!
我有一个客户端JS应用程序,它使用IndexedDB来存储其状态.工作良好.但是,它有点慢,因为我经常读取和写入IndexedDB,以便在打开多个选项卡时状态不会变得不一致.
我的想法是......将所有数据库访问内容放入Service Worker中,然后我可以在内存中缓存值,而不必担心另一个选项卡可能已经更改了数据库.
这似乎工作正常,除了我的应用程序的某些部分需要很长时间才能运行.我可以将服务工作者的状态(例如"X%done")传达给我的UI.但是如果它运行超过30秒,Firefox和Chrome似乎都会杀死它,这对我来说太短了.
这种限制有什么办法吗?如果没有,任何实现类似的想法?我认为共享工作者可以做到这一点,除了浏览器支持很差,我现在预计服务工作者背后的动力不会改善.
我编写了一个在浏览器 (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的,