Question

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

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

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

焦点事件很奇怪，只是有时候。如果我切换到另一个选项卡并返回，焦点事件将不会激活。但是，如果我点击地址栏然后返回页面，它就会。或者，如果我切换到另一个程序然后返回到Chrome，则会激活该选项卡当前是否为焦点。

Answer 1

2015更新：新的HTML5方式，可见性API（取自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()也不会自动执行此操作。如果有人知道解决方法，请提及。

Answer 2

问题Is there a way to detect if a browser window is not currently active?的选定答案应该有效。它利用W3C于2011-06-02起草的Page Visibility API。

Answer 3

它可能会起作用，我很好奇并写了这段代码：

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

您的屏幕上会显示不同的值，但您的标题不会更改。

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

Answer 4

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

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

Answer 5

我发现添加onblur =和onfocus =事件以内联绕过问题：

Answer 6

这可以与JQuery一起使用

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

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

Answer 7

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

如何使用Javascript检测Chrome中何时关注标签？

7 个答案: