在JavaScript中检测选项卡/窗口激活

Question

当我激活Firefox中的标签时,Google会检查通知更新

每次激活它都会显示"0",但在此之后的几秒钟内会更改为一些新通知.

什么是允许进入该事件的机制？是否有特定的DOM事件？或者他们是否使用onmouseover处理程序之类的东西,并且只考虑任何类型的活动是标签激活的充分指标？

Answer 1

有页面可见性文档，它描述了document.onvisibilitychange事件处理程序。

用途

document.onvisibilitychange = function() { 
  console.log("Visibility of page has changed!");
};

Answer 2

不幸的是没有 100% 准确的解决方案

onvisibilitychange在选项卡更改时正确触发，但在窗口更改 (ALT+TAB)时不触发 VisibilityChange 事件在使用 ALT+TAB 切换程序/窗口或单击任务栏中时不会触发

window.onfocus当文档获得焦点时触发。如果选项卡的焦点已经在网页内，那么它会按预期工作，然后当窗口或选项卡获得焦点时它会正确触发。

但如果你的焦点在URL栏上，或者在控制台中，你就已经“失焦”了，当你离开窗口或选项卡并返回时，你将保持“失焦”状态，所以这个事件在您单击页面内部或通过 TAB 键导航到页面之前不会触发

您可以在下面测试每个事件如何触发（在白色 iframe 内单击以测试 onfocus/onblur 事件）

window.onfocus = () => console.log("focus");

window.onblur = () => console.log("out of focus");

document.onvisibilitychange = () => console.log("visibilityState: ", document.visibilityState);

Answer 3

只是一个猜测，因为我还没有所有相关的浏览器都可以进行测试。

如何在上使用该focus事件呢window？每当用户单击某处时，都会调用该选项，但也会切换选项卡。要区分用户在页面上的操作和用户切换到页面上的行为，可以检查事件的explicitOriginalTarget指向是否为window。

window.onfocus=function(event){
    if(event.explicitOriginalTarget===window){
        console.log('switched from tab');
    }
}