是否有跨浏览器事件可用于向用户显示返回其网页的消息?例如,用户打开了十个应用程序或选项卡。他们收到我们应用程序的新通知,我会显示一个通知框。当他们切换到我们的选项卡时,我想开始我们的通知动画。
在桌面应用程序上,activate事件很常见,但到目前为止,在window、document和body上,无论是"activate"还是"DOMActivate"在切换应用程序或选项卡时都不起作用,但"focus"和"blur"确实起作用。这个事件可以工作,但命名不同,本应该起作用的事件却没有起作用。
那么正确的跨浏览器事件是什么,还是有其他事件可用?您可以通过在控制台或页面中添加以下内容,然后在应用程序或选项卡之间切换来进行测试:
window.addEventListener("focus", function(e) {console.log("focused at " + performance.now()) } )
window.addEventListener("blur", function(e) {console.log("blurred at " + performance.now()) } )
更新:
在可能重复链接中的链接中,有一个指向W3页面可见性文档这里的链接。
它建议使用visibilitychange
事件来检查页面何时可见或隐藏,如下所示:
document.addEventListener('visibilitychange', handleVisibilityChange, false);
但是存在一些问题:
顶级浏览上下文的文档可以处于以下可见性状态之一:
隐藏:文档在任何屏幕上都不可见。
可见:文档至少在一个屏幕上部分可见。这与将隐藏属性设置为false的条件相同。
因此,它解释了为什么在切换应用程序时不会触发事件。但即使在切换应用程序并且窗口完全隐藏时,该事件在Firefox中也不会触发。
因此,在页面的末尾有这个注意事项:
页面可见性API使开发人员能够知道文档何时可见或聚焦。已经存在的机制(例如附加到Window对象的焦点和模糊事件)已经提供了一种检测文档是否为活动文档的机制。
因此,似乎建议使用焦点和模糊来检测窗口激活或应用程序切换。
我找到了这个answer,它接近于需要制作跨浏览器解决方案,但至少对于Firefox需要焦点和模糊。
观察: StackOverflow有一个反对提及框架或库的政策。这里链接的答案因为“最佳”答案而受到赞同。
但这些可能会过时。自从昨天我发现了两个框架(polyfills)的提及,它们试图解决此类问题here,对于visibly和isVis(不创建链接)。如果这是一个问答网站,一个有效的答案是“这是一些适用于我的代码”,但是“这是我使用相同代码创建的库,可以在github上保持最新并进行维护”的答案无效,则在我看来它错过了目标。
我知道以上内容可能应该去meta,我已经去了,但他们因某种原因拒绝改变现状。提及它在这里,因为它是一个相关的例子。