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

小编典典

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

javascript

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

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

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

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

阅读 955

2020-05-01

共1个答案

小编典典

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

2020-05-01