在同一浏览器的选项卡/窗口之间进行Javascript通信的最可靠方法是什么?例如,当Tab 2开始音频播放时,Tab 1以某种方式知道这一点并且可以暂停它的播放器.
我正在建立一个带有音乐播放器的网站...所以,如果你打开两个标签到网站,你可以在两者上开始播放音乐.这显然很糟糕,所以我试图找到一个解决方案.
有任何想法吗?谢谢
我正在寻找一种方法,如何在浏览器中的多个选项卡或窗口之间进行通信(在同一个域上,而不是CORS),而不留痕迹.有几个解决方案:
第一个可能是最糟糕的解决方案 - 你需要从当前窗口打开一个窗口,然后只要你打开窗户就可以进行通信.如果您在任何窗口中重新加载页面,则很可能会丢失通信.
第二种方法,使用postMessage,可能启用跨源通信,但遇到与第一种方法相同的问题.您需要维护一个窗口对象.
第三种方式,使用cookie,在浏览器中存储一些数据,这可以有效地看起来像向同一域上的所有窗口发送消息,但问题是你永远不知道所有标签是否已经读过"消息"打扫干净.您必须实现某种超时以定期读取cookie.此外,您受限于最大cookie长度,即4KB.
使用localStorage的第四种解决方案似乎克服了cookie的限制,甚至可以使用事件进行监听.接受的答案中描述了如何使用它.
编辑2018:接受的答案仍然有效,但现代浏览器有一个更新的解决方案,使用BroadcastChannel.有关如何使用BroadcastChannel在选项卡之间轻松传输消息的简单示例,请参阅其他答案.
我编写了一个在浏览器 (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的,