如何使用 Javascript 在 Chrome 中检测选项卡何时聚焦或不聚焦？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2720658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect when a tab is focused or not in Chrome with Javascript?
提问by fent
I need to know if the user is currently viewing a tab or not in Google Chrome. I tried to use the events blur and focus binded to the window, but only the blur seems to be working correctly.
我需要知道用户当前是否正在 Google Chrome 中查看标签页。我尝试使用绑定到窗口的事件模糊和焦点，但似乎只有模糊才能正常工作。
window.addEventListener('focus', function() {
document.title = 'focused';
});
window.addEventListener('blur', function() {
document.title = 'not focused';
});
The focus event works weird, only sometimes. If I switch to another tab and back, focus event won't activate. But if I click on the address bar and then back on the page, it will. Or if I switch to another program and then back to Chrome it will activate if the tab is currently focused.
焦点事件很奇怪，只是有时。如果我切换到另一个选项卡并返回，则不会激活焦点事件。但是如果我点击地址栏然后返回页面，它会。或者，如果我切换到另一个程序，然后返回到 Chrome，它会在选项卡当前处于焦点状态时激活。
回答by ninjagecko
2015 update:The new HTML5 way with visibility API (taken from Blowsie's comment):
2015 年更新：具有可见性 API 的新 HTML5 方式（取自 Blowsie 的评论）：
document.addEventListener('visibilitychange', function(){
document.title = document.hidden; // change tab text for demo
})
The code the original poster gives (in the question) now works, as of 2011:
截至 2011 年，原始海报提供的代码（在问题中）现在有效：
window.addEventListener('focus', function() {
document.title = 'focused';
});
window.addEventListener('blur', function() {
document.title = 'not focused';
});
edit: As of a few months later in Chrome 14, this will still work, but the user must have interacted with the page by clicking anywhere in the window at least once. Merely scrolling and such is insufficient to make this work. Doing window.focus()does not make this work automatically either. If anyone knows of a workaround, please mention.
编辑：几个月后在 Chrome 14 中，这仍然有效，但用户必须至少通过单击窗口中的任意位置一次与页面交互。仅仅滚动等不足以完成这项工作。这样window.focus()做也不会使这项工作自动进行。如果有人知道解决方法，请提及。
回答by thirdender
The selected answer for the question Is there a way to detect if a browser window is not currently active?should work. It utilizes the Page Visibility APIdrafted by the W3C on 2011-06-02.
问题的选定答案有没有办法检测浏览器窗口当前是否处于活动状态？应该管用。它利用了W3C 于 2011-06-02 起草的Page Visibility API。
回答by stacigh
For anyone who wants to swap page titles on blur and then go back to the original page title on focus:
对于想要在模糊上交换页面标题然后在焦点上返回原始页面标题的任何人：
// 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;
});
回答by Bastiaan Linders
It might work after all, i got curious and wrote this code:
毕竟它可能会起作用，我很好奇并写了以下代码：
...
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>
This code does precisly what you want, but on an ugly way. The thing is, Chrome seems to ignore the title change from time to time (when switching to the tab and holding the mouse down for 1 sec seems to always create this effect).
这段代码正是你想要的，但方式很丑陋。问题是，Chrome 似乎不时忽略标题更改（切换到选项卡并按住鼠标 1 秒时似乎总是会产生这种效果）。
You will get different values on your screen, yet your title won't change.
您将在屏幕上看到不同的值，但您的标题不会改变。
conclusion: Whatever you are doing, don't trust the result when testing it!
结论：无论你在做什么，测试时不要相信结果！
回答by Trass Vasston
I found that adding onblur= and onfocus= events to inline bypassed the issue:
我发现将 onblur= 和 onfocus= 事件添加到内联绕过了这个问题：
回答by Konga Raju
This could work with JQuery
这可以与 JQuery 一起使用
$(function() {
$(window).focus(function() {
console.log('Focus');
});
$(window).blur(function() {
console.log('Blur');
});
});
回答by Ben Vail
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;
在Chrome中，您可以使用小于1秒的超时运行后台脚本，当标签没有焦点Chrome时，只需每秒运行它。例子;
This doesn't work in Firefox or Opera. Don't know about other browsers, but I doubt it works there too.
这在 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);
