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

Question

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

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

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

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

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

---

Чтобы ответить на комментированный вопрос о "двойном огне" и остаться в пределах удобства использования 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)

Answer 2

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

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

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

Учить больше

• http://davidwalsh.name/page-visibility
• https://developers.google.com/chrome/whitepapers/pagevisibility
• Пример приостановки видео, когда окно / вкладка скрыта
  https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/

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

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

Answer 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 */}
}

Answer 5

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

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

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

Answer 6

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

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