浏览器中是否有用于激活的跨浏览器事件？

Question

是否有可用于向用户显示返回其网页的消息的跨浏览器事件？

例如,用户打开了十个应用程序或选项卡.他们从我们的应用程序收到新通知,我会显示一个通知框.当他们切换到我们的标签时,我想开始我们的通知动画.

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);

但是有一些问题:

顶级浏览上下文的文档可以处于以下可见性状态之一:

隐藏文档在任何屏幕上都不可见.可见文档至少在一个屏幕上至少部分可见.这与hidden属性设置为false的条件相同.

所以它解释了为什么在切换应用时它不会触发.但即使切换应用程序和窗口完全隐藏,事件也不会触发(在Firefox中).

所以在页面的最后是这个说明:

Page Visibility API使开发人员能够了解文档何时可见或焦点.当附加到Window对象时,现有机制(例如焦点和模糊事件)已经提供了一种机制来检测Document何时是活动文档.

因此,似乎建议使用焦点和模糊来检测窗口激活或应用切换是公认的做法.

我发现这个答案接近于制作跨浏览器解决方案所需要的但需要关注和模糊(至少对于Firefox).

观察:
StackOverflow有一个反对提及框架或库的策略.这里链接的答案有"最佳"答案的支持.

但这些可能会变得过时.从昨天开始,我发现提到了两个框架(polyfill),试图在这里明显解决同样的问题和isVis(不创建链接).如果这是一个问答网站,并且有一个有效的答案是"这里有一些适用于我的代码"但是"这是我使用相同代码创建的库,可以保持最新并在github上维护"不是有效,然后在我看来它错过了它的目标.

我知道上面应该可以去meta而且我有但是他们因为某些原因拒绝改变现状.在这里提到它,因为它是一个相关的例子.

Answer 1

页面生命周期 API可用于监听visibilitychange事件。

当用户导航到新页面、切换选项卡、关闭选项卡、最小化或关闭浏览器或在移动操作系统上切换应用程序时，[此事件触发]。引用

当前浏览器支持

MDN 上的参考