如何检测一个选项卡的重点或不使用JavaScript的Chrome？

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

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

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

Answer 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中，这仍然可以工作，但用户必须至less点击一次窗口中的任何位置才能与页面进行交互。 只是滚动，这是不够的，使这项工作。 做window.focus()不会自动工作。 如果有人知道解决方法，请提及。

Answer 2

问题的select答案有没有办法来检测浏览器窗口是否目前不活跃？ 应该工作。 它利用2011-06-02由W3C起草的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秒似乎始终创造这种效果）。

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

结论：不pipe你在做什么，在testing时不要相信结果！

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 = events来内联绕过这个问题：

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