在浏览器中是否有一个跨浏览器的事件用于激活?

6

是否有跨浏览器事件可用于向用户显示返回其网页的消息?例如,用户打开了十个应用程序或选项卡。他们收到我们应用程序的新通知,我会显示一个通知框。当他们切换到我们的选项卡时,我想开始我们的通知动画。

在桌面应用程序上,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,我已经去了,但他们因某种原因拒绝改变现状。提及它在这里,因为它是一个相关的例子。

这是一种使用焦点和失焦的方法,是的。请参见下面的链接。 - Alexandre Elshobokshy
可能是重复问题,查看此链接:有没有办法检测浏览器窗口当前是否处于非活动状态? - Alexandre Elshobokshy
我的问题不同之处在于它是为了检查窗口当前是否处于活动状态,而非非活动状态。看到区别了吗?我关心的是他们是否激活窗口,而不是它是否非活动。然而,那个回答的很多内容都是有帮助的。 - 1.21 gigawatts
1个回答

3

谢谢。我已经仔细阅读并测试了它,它可以用于选项卡切换,但似乎无法捕获应用程序切换(通过alt + tab)。焦点和模糊至少在Firefox中有效,因此可能可以组合使用。另一个注意点:当切换并且页面完全被遮挡时,document.hidden标志仍然报告为可见。 - 1.21 gigawatts

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接