如何使用Javascript在Chrome浏览器中检测标签是否处于焦点状态?

我需要知道用户当前是否在Google Chrome浏览器中查看标签页。 我尝试使用事件模糊和焦点绑定到窗口,但是只有模糊似乎可以正常工作。

window.addEventListener('focus', function() {
  document.title = 'focused';
});

window.addEventListener('blur', function() {
  document.title = 'not focused';
});

焦点事件的工作很奇怪,仅在某些时候如此。 如果我切换回另一个标签,则焦点事件将不会激活。 但是,如果我单击地址栏,然后返回页面,它将。 或者,如果我当前正在切换标签页,那么当我切换到另一个程序然后又回到Chrome时,它将激活。

fent asked 2019-09-29T10:11:05Z
7个解决方案
119 votes

2015年更新:具有可见性API的新HTML5方式(摘自Blowsie的评论):

document.addEventListener('visibilitychange', function(){
    document.title = document.hidden; // change tab text for demo
})

从2011年起,原始海报提供的代码(已提出问题)现已生效:

window.addEventListener('focus', function() {
    document.title = 'focused';
});

window.addEventListener('blur', function() {
    document.title = 'not focused';
});

编辑:几个月后,在Chrome 14中仍然可以使用,但是用户必须至少单击一次窗口中的任何位置才能与页面进行交互。 仅滚动并不足以完成这项工作。 这样做window.focus()也不会使该工作自动进行。 如果有人知道解决方法,请提及。

ninjagecko answered 2019-09-29T10:11:34Z
8 votes

问题的选定答案是否有办法检测浏览器窗口当前是否未激活? 应该管用。 它利用了W3C在2011-06-02上草拟的Page Visibility API。

thirdender answered 2019-09-29T10:11:58Z
2 votes

毕竟它可能会起作用,我很好奇并编写了以下代码:

...
setInterval ( updateSize, 500 );
function updateSize(){
  if(window.outerHeight == window.innerHeight){
    document.title = 'not focused';             
  } else {
    document.title = 'focused';
  }

  document.getElementById("arthur").innerHTML = window.outerHeight + " - " + window.innerHeight;
}
...
<div id="arthur">
  dent
</div>

这段代码精确地完成了您想要的,但是方式很丑陋。 事实是,Chrome似乎不时会忽略标题更改(当切换到选项卡并按住鼠标1秒钟似乎总是会产生这种效果)。

屏幕上会显示不同的值,但标题不会改变。

结论:无论您在做什么,测试时都不要相信结果!

Bastiaan Linders answered 2019-09-29T10:12:43Z
2 votes

对于想要在模糊时交换页面标题然后在焦点上返回原始页面标题的任何人:

// Swapping page titles on blur
var originalPageTitle = document.title;

window.addEventListener('blur', function(){
    document.title = 'Don\'t forget to read this...';
});

window.addEventListener('focus', function(){
    document.title = originalPageTitle;
});
stacigh answered 2019-09-29T10:13:07Z
0 votes

我发现将onblur =和onfocus =事件添加到行内绕过了问题:

Trass Vasston answered 2019-09-29T10:13:31Z
0 votes

这可以与JQuery一起使用

$(function() {
    $(window).focus(function() {
        console.log('Focus');
    });

    $(window).blur(function() {
        console.log('Blur');
    });
});
Konga Raju answered 2019-09-29T10:13:55Z
-2 votes

在chrome中,您可以运行超时少于1秒的后台脚本,并且当选项卡没有焦点时,chrome只会每秒运行一次。 例;

这在Firefox或Opera中不起作用。 不了解其他浏览器,但我怀疑它是否也可以使用。

var currentDate = new Date();
var a = currentDate.getTime();

function test() {
    var currentDate = new Date();
    var b = currentDate.getTime();
var c = b - a;
    if (c > 900) {
        //Tab does not have focus.
    } else {
        //It does
    }
    a = b;
    setTimeout("test()",800);
}



setTimeout("test()",1);
Ben Vail answered 2019-09-29T10:14:25Z
translate from https://stackoverflow.com:/questions/2720658/how-to-detect-when-a-tab-is-focused-or-not-in-chrome-with-javascript