浏览器中是否有跨浏览器事件可供激活?

时间:2018-12-13 09:39:22

标签: javascript html css

是否存在一个跨浏览器事件,可用于向返回到其网页的用户显示消息?

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

activate事件在桌面应用程序上很常见,但到目前为止,在windowdocumentbody"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()) } )

更新
the possible duplicate的链接中是W3页面可见性文档here的链接。

它说使用visibilitychange事件检查页面的可见或隐藏状态,如下所示:

document.addEventListener('visibilitychange', handleVisibilityChange, false);

但是有问题:

  

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

     

隐藏       在任何屏幕上根本看不到该文档。可见       该文档在至少一个屏幕上至少部分可见。这是将hidden属性设置为的相同条件   错误。

因此它解释了为什么切换应用程序时不触发。但是,即使在切换应用程序且窗口完全隐藏的情况下,该事件也不会触发(在Firefox中)。

因此在页面末尾是此注释:

  

Page Visibility API使开发人员可以知道何时创建文档   可见或聚焦。现有的机制,例如聚焦和模糊   事件,当附加到Window对象时已经提供了一种机制   检测文档何时为活动文档。

因此,这似乎暗示使用焦点和模糊来检测窗口激活或应用程序切换是公认的做法。

我发现这个answer与制作跨浏览器解决方案所需的内容非常接近,但需要集中和模糊(至少对于Firefox)。

观察
StackOverflow的政策禁止提及框架或库。此处链接的答案具有“最佳”答案的赞誉。

但是这些可能会过时。从昨天开始,我发现提到了两个框架(polyfills),它们试图以可见的方式和isVis(未创建链接)解决同一问题here。如果这是一个问答网站,并且有效的答案是,“这里有一些对我有用的代码”,但是“这里是我使用相同的代码创建的库,该库可以保持最新并可以在github上维护”有效,然后我认为它没有实现目标。

我知道以上可能应该转到meta上,但是由于某些原因,他们拒绝更改现状。在此提及它,因为这是一个相关示例。

1 个答案:

答案 0 :(得分:2)

Page lifecycle API可用于侦听visibilitychange事件。

  

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

Current browser support

Reference on MDN