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

Question

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

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

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

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

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

444 6

jQuery javascript

6 ответов:

Comments

Ничего не найдено.

Richard Simões · Accepted Answer · 2014-12-29 20:59:57

можно использовать 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)

gearsdigital · Accepted Answer · 2018-08-20 05:23:25

кроме Richard Simões ответом вы также можете использовать API видимости страницы.
if (!document.hidden) {
    // do what you need
}
эта спецификация определяет средство для разработчиков сайта программно определить текущее состояние видимости страницы в заказ на разработку мощных и ЦП эффективных веб-приложений.

узнать еще

http://davidwalsh.name/page-visibility

https://developers.google.com/chrome/whitepapers/pagevisibility

пример приостановки видео, когда окно / вкладка hidden
https://web.archive.org/web/20170609212707/http://www.samdutton.com/pageVisibility/

CMS · Accepted Answer · 2018-07-05 23:28:28

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

Chris Fulstow · Accepted Answer · 2009-11-19 03:20:17

С помощью 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 */}
}

Daniel Quinn · Accepted Answer · 2012-01-17 15:06:35

все примеры здесь (за исключением rockacola) требуют, чтобы пользователь физически нажмите на окно, чтобы определить фокус. Это не идеально, так что .hover() лучше:
$(window).hover(function(event) {
    if (event.fromElement) {
        console.log("inactive");
    } else {
        console.log("active");
    }
});
это скажет вам, когда пользователь имеет свою мышь на экране, хотя он все еще не скажет вам, если он находится на переднем плане с мышью пользователя в другом месте.

Trav L · Accepted Answer · 2016-06-15 23:01:09

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