问题:
我需要一个客户端 Javascript 解决方案(jQuery 很好),其中一个浏览器窗口/选项卡中的事件可以广播到同一域上的其他窗口/选项卡。例如,如果在选项卡 A 中更新了购物车,则选项卡 B 和 C 会收到通知,以便我们可以更新页面上的一些信息,或者通知用户该页面已过时,或类似的事情。
我试过的:
BroadcastChannel API非常适合我的需求,但在 IE 11 或 Safari 中不起作用。
所以我尝试了这个 polyfill,这样我就可以在任何地方使用 BroadcastChannel API。它在 IE 中有效,但在 Safari 中无效(我相信 BroadcastChannel 仍未定义)。
然后我尝试了 sysend.js,它使用 BroadCastChannel(如果可用),否则使用localStorage
. 他们的演示页面在 Safari 中运行良好,但在我的网站上,我发现它在 Safari 9 中运行,但不是 10-12(使用 BrowserStack 和一台运行 Safari 12 的真实 Mac 进行测试)。调试他们的脚本,似乎在不同选项卡中更改时应该触发的存储事件localStorage
根本不会触发。但这实际上只是当您document.domain
设置时才会出现的问题,我这样做了。
我相信这与这个旧的 Chrome 错误相同。但是,虽然 Chrome 在 2012 年至 2017 年出现了这个问题,但 Safari 显然是在 2017 年左右推出的?
我还没有发现其他人在 Safari 中讨论这个错误,但我可以很容易地证明这一点。打开两个使用相同document.domain
值的选项卡并运行以下脚本:
选项卡 A:
$(window).on("storage", function (e) {
alert('storage was modified');
});
选项卡 B:
localStorage.setItem("test", "123");
在 Safari 9 中,选项卡 A 将弹出警报。在 Safari 10+ 中,它不会。
如果我删除document.domain
,它可以工作。请注意,我们document.domain
在这些页面上使用,但在这种情况下它们实际上位于同一个域中。但是document.domain
,整个站点的其他场景都需要它,因此我无法将其删除。
我还尝试查看store.js。它有一个事件系统,但它似乎只能在同一个选项卡中工作(在任何浏览器中)。除非我错过了什么。
document.domain
那么,当你有一个集合时,是否有任何 BroadcastChannel polyfill 或类似的库可以在 Safari 10+ 中实际运行? 或任何其他方式来做到这一点?
笔记:
- 我知道 BroadcastChannel 和“存储”事件
localStorage
仅针对当前选项卡以外的选项卡触发。那不是我的问题,实际上对我来说是可取的。 - 我还看到一些帖子让我相信依赖于
localStorage
可能的替代解决方案在 Safari 的隐私浏览模式下不起作用。编辑:看来这已在 Safari 11 中修复,因此它确实有效,但在我的测试中,它没有与任何其他选项卡共享 localStorage,甚至没有与同一窗口中的其他私人选项卡共享。所以这没什么帮助。 理想情况下,一个解决方案也可以解决这个问题,但在这一点上,我会对 Safari 10+ 中对我有用的任何东西感到满意。我确实在store.js项目中看到了一个示例,他们说他们制作了它,因此在这种情况下它会回退到 cookie,因此至少听起来是可能的。 - 我试图考虑其他方法来做到这一点,每隔几秒或某事
setInterval
检查一次更新。localStorage
即使在理论上看起来真的很老套和不可靠(你怎么知道所有页面什么时候都“收到”了更新,所以你可以清除它?)。你怎么知道什么时候用这种 hacky 方式而不是使用的首选方法之一localStorage
?Safari 10+ 会报告它支持localStorage
,所以你无法真正检测到它,对吧?它“支持”它,只是无法正常工作。