小编典典

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

javascript

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

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

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

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


阅读 952

收藏
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