可能重复:
Is there a way to detect if a browser window is not currently active?
我有一个每秒调用的函数,如果当前页面在前台,我只想运行,即用户没有最小化浏览器或切换到另一个选项卡。如果用户没有看到它并且可能是CPU密集型的话,它没有用处,所以我不想在后台浪费周期。
有谁知道如何用JavaScript告诉它?
注意:我使用jQuery,所以如果你的答案使用它,那很好:)。
答案 0 :(得分:314)
您可以使用窗口的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;
});
回答“双火”的评论问题并保持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);
})
答案 1 :(得分:248)
除了Richard Simões回答,您还可以使用Page Visibility API。
if (!document.hidden) {
// do what you need
}
此规范为网站开发人员定义了一种方法 以编程方式确定页面的当前可见性状态 为了开发功能和CPU效率高的Web应用程序。
答案 2 :(得分:128)
我会尝试在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);
尝试here。
答案 3 :(得分:16)
使用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 */}
}
答案 4 :(得分:6)
此处的所有示例(rockacola除外)都要求用户在物理上单击窗口以定义焦点。这不是理想的,所以.hover()
是更好的选择:
$(window).hover(function(event) {
if (event.fromElement) {
console.log("inactive");
} else {
console.log("active");
}
});
这会告诉你用户何时将鼠标放在屏幕上,但它仍然不会告诉你它是否在用户的鼠标位于其他地方的前景中。
答案 5 :(得分:5)
如果您在Chrome中打开时尝试执行类似于Google搜索页面的操作,(当您“关注”页面时会触发某些事件),那么hover()事件可能有所帮助。
$(window).hover(function() {
// code here...
});