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

290

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

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

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

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

  • 18
    +1 хотел бы узнать ответ. моя проблема не в нагрузке на процессор, а в пропускную способность и нагрузку на сервер.
  • 0
    Если вы хотите плагин Jquery .. github.com/keithhackbarth/jquery-window-active
Показать ещё 1 комментарий
Теги:

6 ответов

320
Лучший ответ

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

Поделиться
  • 0
    это работает? тестирование? так просто?
  • 0
    @thephpdeveloper: Конечно. Если у вас есть firebug, попробуйте простой вызов console.log('test') для любого из этих событий.
Показать ещё 10 комментариев
225

В дополнение к ответу Richard Simões вы также можете использовать API видимости страницы.

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

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

Учить больше

Поделиться
  • 15
    +1 за ответ, который не зависит от jQuery. Это также кажется лучшим ответом в долгосрочной перспективе, поскольку браузеры переходят на поддержку стандартов W3C. Пример Дэвида Уолша работал для меня на Chrome и Firefox, но не на Safari.
  • 3
    Видимость и фокус - совершенно разные вещи.
Показать ещё 4 комментария
124

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

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

Поделиться
  • 1
    пример потрясающий. есть идеи об IE?
  • 1
    Я могу подтвердить, что он отлично работает в IE7, не проверял и после этого, это лучший ответ, и это был также первый ответ среди всех функционально одинаковых ответов, проголосуйте!
Показать ещё 9 комментариев
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 */}
}
Поделиться
6

Все приведенные здесь примеры (за исключением rockacola) требуют, чтобы пользователь физически щелкнул по окну, чтобы определить фокус. Это не идеально, поэтому .hover() - лучший выбор:

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

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

Поделиться
  • 2
    Хорошее нестандартное мышление; однако, это не очень хорошо работает, если вы пытаетесь выяснить, как долго пользователь остается на странице. Кроме того, hover не подходит для мобильных браузеров. Честно говоря, я понятия не имею, сработает ли привязка событий focus или blur на мобильных устройствах.
  • 0
    Кроме того, зависание зависит от движения мыши. если вкладка была введена с помощью сочетания клавиш, то, возможно, наведение не сработало.
5

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

$(window).hover(function() {
  // code here...
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню