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

javascript jquery

2022-08-29 23:22:18

可能的重复：
有没有办法检测浏览器窗口当前是否处于活动状态？

我有一个每秒调用一次的函数，我只想在当前页面位于前台时运行该函数，即用户尚未最小化浏览器或切换到另一个选项卡。如果用户不看它，并且可能是CPU密集型的，那么它没有任何用处，所以我不想只是在后台浪费周期。

有谁知道如何在JavaScript中分辨出这一点？

注意：我使用jQuery，所以如果你的答案使用它，那很好:)。

答案 1

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

此规范定义了一种网站开发人员以编程方式确定页面的当前可见性状态的方法，以便开发功率和 CPU 效率高的 Web 应用程序。

了解更多信息（2019年更新）

所有现代浏览器都支持 document.hidden
http://davidwalsh.name/page-visibility
https://developers.google.com/chrome/whitepapers/pagevisibility
在窗口/标签页隐藏
时暂停视频的示例 https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/

答案 2

您将使用窗口的和事件：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;
});

要回答“双重射击”的评论问题并保持在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）