首页 文章

如何判断浏览器/标签是否有效[重复]

提问于
浏览 次
285

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

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

有谁知道如何在JavaScript中讲述这个？

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

javascript jquery

6 回答

  • 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 */}
}
    回复于
  • 5

    这里的所有例子（除了rockacola 's) require that the user physically click on the window to define focus. This isn' t理想，所以 .hover() 是更好的选择：

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

    这将告诉您用户何时将鼠标放在屏幕上，尽管它仍然不会告诉您它是否在用户鼠标位于其他地方的前景中 .

    回复于
  • 218

    如果您在Chrome中打开时尝试执行类似于Google搜索页面的操作，（当您“关注”页面时会触发某些事件），那么hover（）事件可能有所帮助 .

    $(window).hover(function() {
  // code here...
});
    回复于
  • 301

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

    点击查看Example Code Showing it working (JSFiddle)

    回复于
  • 124

    除了Richard Simões回答你还可以使用Page Visibility API .

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

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

    了解更多

    回复于
  • 6

    我会尝试在 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 .

    回复于

相关问题