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

Question

我需要知道用户当前是否在Google Chrome浏览器中查看标签页。我尝试使用事件模糊和焦点绑定到窗口，但是只有模糊似乎可以正常工作。window.addEventListener('focus', function() {  document.title = 'focused';});window.addEventListener('blur', function() {  document.title = 'not focused';});焦点事件的工作很奇怪，仅在某些时候如此。如果我切换回另一个标签，则焦点事件将不会激活。但是，如果我单击地址栏，然后返回页面，它将。或者，如果我当前正在切换标签页，那么当我切换到另一个程序然后又回到Chrome时，它将激活。

Answer 1

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

Answer 2

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

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

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

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