Jak sprawdzić, czy przeglądarka/karta jest aktywna [duplikat]

Możliwy duplikat:
czy istnieje sposób na wykrycie, czy okno przeglądarki nie jest obecnie aktywne?

Mam funkcję, która jest wywoływana co sekundę, którą chcę uruchomić tylko wtedy, gdy bieżąca strona jest na pierwszym planie, tzn. użytkownik nie zminimalizował przeglądarki lub nie przełączył się na inną kartę. Nie służy to żadnemu celowi, jeśli użytkownik nie patrzy na niego i jest potencjalnie obciążony procesorem, więc nie chcę po prostu marnować cykli w tle.

Robi wie ktoś jak to powiedzieć w JavaScript?

Uwaga: używam jQuery, więc jeśli Twoja odpowiedź tego używa, to w porządku :).

Author: Community, 2009-11-19
Source

6 answers

Można użyć zdarzeń focus i blur okna: 

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

Aby odpowiedzieć na skomentowany problem "podwójnego ognia" i pozostać w jQuery łatwość użycia: 

$(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);
})

Kliknij, aby wyświetlić przykładowy kod pokazujący, że działa (JSFiddle)

 296
Author: Richard Simões,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-29 18:59:57

Oprócz odpowiedzi Richard Simões Możesz również użyć API widoczności strony .

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

Ta specyfikacja określa sposób dla twórców stron do programowo określa aktualny stan widoczności strony w zamówienie na tworzenie wydajnych i wydajnych aplikacji internetowych.

Ucz się więcej

 200
Author: gearsdigital,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-20 02:23:25

Spróbowałbym ustawić flagę na zdarzeniach window.onfocus i window.onblur.

Poniższy fragment został przetestowany na Firefoksie, Safari i Chrome, otwórz konsolę i poruszaj się między kartami w przód iw tył: 

var isTabActive;

window.onfocus = function () { 
  isTabActive = true; 
}; 

window.onblur = function () { 
  isTabActive = false; 
}; 

// test
setInterval(function () { 
  console.log(window.isTabActive ? 'active' : 'inactive'); 
}, 1000);

Wypróbuj to tutaj .

 122
Author: CMS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-05 20:28:28

Using 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 */}
}
 16
Author: Chris Fulstow,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-19 01:20:17

Wszystkie przykłady tutaj (z wyjątkiem rockacoli) wymagają, aby użytkownik fizycznie kliknął okno, aby zdefiniować fokus. To nie jest idealne, więc .hover() jest lepszym wyborem: 

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

To powie Ci, kiedy użytkownik ma mysz na ekranie, choć nadal nie powie Ci, czy jest na pierwszym planie z myszą użytkownika w innym miejscu.

 6
Author: Daniel Quinn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-17 13:06:35

Jeśli próbujesz zrobić coś podobnego do strony wyszukiwania Google po otwarciu w Chrome (gdzie pewne zdarzenia są wyzwalane po "skupieniu" się na stronie), Zdarzenie hover () może pomóc.

$(window).hover(function() {
  // code here...
});
 5
Author: Trav L,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-15 20:01:09