可能的重复：
有没有办法检测浏览器窗口当前是否处于活动状态？
我有一个每秒调用一次的函数，如果当前页面在前台，我只想运行它，即用户没有最小化浏览器或切换到另一个选项卡。如果用户不看它并且可能是 CPU 密集型的，它就没有任何用处，所以我不想只是在后台浪费周期。
有谁知道如何在 JavaScript 中告诉这个？
注意：我使用 jQuery，所以如果你的答案使用它，那很好:)。
如何判断浏览器/选项卡是否处于活动状态
IT技术
javascript
jquery
2021-02-07 14:46:51
6个回答
除了Richard Simões 的回答之外，您还可以使用Page Visibility API。
if (!document.hidden) {
// do what you need
}
该规范为站点开发人员定义了一种以编程方式确定页面当前可见性状态的方法，以便开发高效且 CPU 高效的 Web 应用程序。
了解更多（2019 年更新）
您将使用窗口的focus和blur事件：
var interval_id;
$(window).focus(function() {
if (!interval_id)
interval_id = setInterval(hard_work, 1000);
});
$(window).blur(function() {
clearInterval(interval_id);
interval_id = 0;
});
回答“Double Fire”的评论问题并保持jQuery的易用性：
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// do work
break;
case "focus":
// do work
break;
}
}
$(this).data("prevType", e.type);
})
我会尝试在window.onfocus和window.onblur事件上设置一个标志。
以下代码段已在 Firefox、Safari 和 Chrome 上进行了测试，打开控制台并在选项卡之间来回移动：
var isTabActive;
window.onfocus = function () {
isTabActive = true;
};
window.onblur = function () {
isTabActive = false;
};
// test
setInterval(function () {
console.log(window.isTabActive ? 'active' : 'inactive');
}, 1000);
使用jQuery：
$(function() {
window.isActive = true;
$(window).focus(function() { this.isActive = true; });
$(window).blur(function() { this.isActive = false; });
showIsActive();
});
function showIsActive()
{
console.log(window.isActive)
window.setTimeout("showIsActive()", 2000);
}
function doWork()
{
if (window.isActive) { /* do CPU-intensive stuff */}
}
此处的所有示例（rockacola 的除外）都要求用户物理单击窗口以定义焦点。这并不理想，因此.hover()是更好的选择：
$(window).hover(function(event) {
if (event.fromElement) {
console.log("inactive");
} else {
console.log("active");
}
});
这会告诉您用户何时将鼠标放在屏幕上，但它仍然不会告诉您它是否在用户的鼠标在其他地方的前景中。