如何判断浏览器/标签页是否处于活动状态

2020/09/30 09:01 · javascript ·  · 0评论

可能重复:
是否有方法检测浏览器窗口当前是否未激活?

我有一个每秒调用一次的函数,仅当当前页面位于前台时才想运行,即用户没有最小化浏览器或切换到另一个选项卡。如果用户不看,它就没有用,并且可能占用大量CPU,因此我不想只在后台浪费时间。

有人知道如何用JavaScript讲这个吗?

注意:我使用jQuery,因此,如果您的答案使用了jQuery,那就很好了:)。

您将使用窗口focusblur事件:

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

单击以查看示例代码,显示其正常工作(JSFiddle)

除了RichardSimões的答案,您还可以使用Page Visibility API

if (!document.hidden) {
    // do what you need
}

该规范定义了一种方法,站点开发人员可以以编程方式确定页面的当前可见性状态,以便开发功能强大且CPU效率高的Web应用程序。

了解更多(2019更新)

我会尝试在window.onfocuswindow.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 */}
}

All of the examples here (with the exception of rockacola's) require that the user physically click on the window to define focus. This isn't ideal, so .hover() is the better choice:

$(window).hover(function(event) {
    if (event.fromElement) {
        console.log("inactive");
    } else {
        console.log("active");
    }
});

This'll tell you when the user has their mouse on the screen, though it still won't tell you if it's in the foreground with the user's mouse elsewhere.

如果您尝试在Chrome中打开时执行与Google搜索页面类似的操作(当您“聚焦”页面时会触发某些事件),那么hover()事件可能会有所帮助。

$(window).hover(function() {
  // code here...
});
本文地址:http://javascript.askforanswer.com/ruhepanduanliulanqi-biaoqianyeshifouchuyuhuodongzhuangtai.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!