用 Javascript 如何在 Chrome 中检测标签是否聚焦？

我需要知道用户目前是否正在谷歌浏览器中浏览标签页。我尝试使用事件模糊和聚焦绑定到窗口，但只有模糊似乎工作正常。

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


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

焦点事件的工作原理很奇怪，只是有时候。如果我切换到另一个选项卡并返回，焦点事件将不会激活。但如果我点击地址栏，然后回到页面上，它会。或者，如果我切换到另一个程序，然后回到 Chrome，它会激活，如果标签是目前的焦点。

66983 次浏览
小开

它可能会工作，毕竟，我很好奇，并写了这样的代码:

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

你会在屏幕上得到不同的值，但是你的标题不会改变。

结论: 不管你在做什么，不要相信测试结果！

小开
最佳答案

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()也不会自动完成这项工作。如果有人知道变通方法，请提及。

小开

我发现在内联中添加 onFuzzy = 和 onfocus = events 绕过了这个问题:

小开

In chrome you can run a background script with a timeout of less than 1 second, and when the tab does not have focus chrome will only run it every second. Example;

这在 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);
小开

这可以用于 JQuery

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


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

问题 是否有检测浏览器窗口当前是否处于活动状态的方法？的选定答案应该可行。它利用了 W3C 在2011-06-02起草的 页面可见性 API。

小开

对于那些想在模糊中交换页面标题，然后回到原始页面标题的人来说:

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

提交答案