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

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

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

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

焦点事件的工作很奇怪，仅在某些时候如此。如果我切换回另一个标签，则焦点事件将不会激活。但是，如果我单击地址栏，然后返回页面，它将。或者，如果我切换到另一个程序，然后再回到Chrome，则该选项卡当前处于焦点状态时它将激活。

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()做也不会使这项工作自动进行。如果有人知道解决方法，请提及。

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

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

...
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秒钟似乎总是会产生这种效果）。

您将在屏幕上获得不同的值，但标题不会改变。

结论：无论您在做什么，测试时都不要相信结果！

对于想在模糊时交换页面标题，然后再回到焦点的原始页面标题的任何人：

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

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

这可以与JQuery一起使用

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

    $(window).blur(function() {
        console.log('Blur');
    });
});

在Chrome中，你可以在不到1秒的超时运行后台脚本，而当标签没有焦点铬将只运行它的每一秒。例;

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