Как узнать, активен ли браузер/вкладка

Возможный дубликат:
Есть ли способ определить, не открыто ли окно браузера?

У меня есть функция, которая вызывается каждую секунду, которую я только хочу запускать, если текущая страница находится на переднем плане, то есть пользователь не свернул браузер или не переключился на другую вкладку. Это нецелесообразно, если пользователь не смотрит на него и потенциально интенсивно работает на CPU, поэтому я не хочу просто тратить циклы в фоновом режиме.

Кто-нибудь знает, как это сказать в JavaScript?

Примечание. Я использую jQuery, поэтому, если ваш ответ использует это, это прекрасно:).

Ответы

Ответ 1

Вы использовали бы события 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);
})

Нажмите Пример кода Показывает, что он работает (JSFiddle)

Ответ 2

В дополнение к ответу Ричарда Симоэса вы также можете использовать API видимости страницы.

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

Эта спецификация определяет средства для разработчиков сайта программно определить текущее состояние видимости страницы в чтобы разрабатывать веб-приложения, эффективные с точки зрения энергопотребления и использования процессора.

Узнать больше (обновление 2019 года)

Ответ 3

Я бы попытался установить флаг для событий 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);

Попробуйте это здесь.

Ответ 4

Использование 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) требуют, чтобы пользователь физически щелкнул по окну, чтобы определить фокус. Это не идеально, поэтому .hover() - лучший выбор:

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

Это скажет вам, когда пользователь нажимает на экран, хотя он все равно не скажет вам, находится ли он на переднем плане с помощью мыши пользователя в другом месте.

Ответ 6

Если вы пытаетесь сделать что-то похожее на страницу поиска Google при открытии в Chrome (когда определенные события запускаются, когда вы фокусируетесь на странице), тогда может возникнуть событие hover().

$(window).hover(function() {
  // code here...
});