Jak można wykryć, czy strona jest w tle lub na pierwszym planie z jquery/javascript?

Question

Tytuł wyjaśnia sam. Jak wykryć, czy strona internetowa przeszła w tło?

Wdrażam aplikację do czatu, a wykorzystam te informacje, aby zdecydować o wyświetlaniu nowych powiadomień o wiadomościach. Przypuszczam, że Gmail używa czegoś takiego. Jeśli strona jest w tle, pokazuje powiadomienia na pulpicie (w chrome), jeśli nie, nie pokazuje ich.

Answer 1

Wiem, że odpowiedź została już wybrana, ale chciałem podzielić się innym sposobem.

Możesz użyć metody hasFocus na document, aby sprawdzić, czy ma fokus. Nie ma powodu, aby ustawiać własną zmienną.

Oto kilka dowodów kodu koncepcyjnego. jsFiddle znajduje się na samym dole. Co 3 sekundy sprawdza, czy okno ma fokus lub nie, wyświetlając wartość true lub false.

HTML:

<p>This will show if the document has focus every three seconds</p> 
<button id="go">Go</button> 
<button id="stop">Stop</button> 

<ul id="active_log"> 
</ul> 

CSS:

#stop { display: none; } 

JavaScript wewnątrz na dokumencie gotowe:

var timeout = null; 

var checkActive = function() { 
    var isActive = window.document.hasFocus(), 
     $activity = $("<li />").text(isActive.toString()); 

    $('#active_log').prepend($activity).find('li:nth-child(n+6)').fadeOut(function() { 
     $(this).remove(); 
    }); 

    timeout = setTimeout(checkActive, 3000); 
} 

$('#go').click(function() { 
    $(this).hide().siblings('button').show(); 
    checkActive(); 
}); 

$('#stop').click(function() { 
    $(this).hide().siblings('button').show(); 
    clearTimeout(timeout); 
    timeout = null; 
}); 

http://jsfiddle.net/natedavisolds/2D7za/1/

Answer 2

Można powiązać ze zdarzeniami window z blur i focus. Oto fragment kodu z an app I wrote:

$(window).bind("blur", function() { 
    Chatterbox.set_focused(false); 
}); 

$(window).bind("focus", function() { 
    Chatterbox.set_focused(true); 
}); 

Answer 3

Jest teraz page visibility API za to, i to jest dobrze obsługiwany przez wszystkie najnowsze wersje głównych przeglądarek na Windows, Mac OS X i Linuksa (chociaż mam w rzeczywistości nie przetestowano wszystkich przeglądarek z uczciwym udziałem w rynku przeglądarki Linux).

Interfejs API widoczności strony jest teraz najlepszym sposobem sprawdzania widoczności; jedynymi zastrzeżeniami są to, że nie można powiedzieć, które części okna przeglądarki są widoczne (tylko to, że nic nie jest widoczne lub przynajmniej część z nich jest), a ta obsługa jest obecna tylko od 2016 roku w systemie Linux, 2015 na komputerze Mac i 2014 (prawdopodobnie wcześniej) w systemie Windows.

Podczas wdrażania wsparcia fałszywy negatyw był rzadki, ale na niektórych platformach wystąpiły fałszywe alarmy; na przykład w 2014 r. OSX wyświetlał miniaturowe wersje zminimalizowanych aplikacji w stacji dokującej, a w wyniku sposobu, w jaki zostało to zrobione, aplikacja nie mogła łatwo stwierdzić, czy została ona zminimalizowana, ponieważ wciąż wymagano od malowania ekranu. Linux miał komplikacje wiedząc, czy twoja aplikacja znajdowała się w niewidocznym obszarze roboczym i czy inne okno go blokowało.

Pierwszy publiczny projekt został opublikowany w czerwcu 2011 r., A status "rekomendacji" osiągnął w maju 2013 r. Do marca 2014 r. Najnowsze wersje wszystkich głównych przeglądarek Windows miały pełną obsługę standardu. Pełna obsługa wszystkich głównych przeglądarek Maca została osiągnięta w kwietniu 2015 roku. Wsparcie dla systemu Linux osiągnięto przynajmniej dla Chromium do sierpnia 2016 roku (kiedy zamknięto Chromium issue 293128); chociaż ich nie testowałem, spodziewam się, że inne przeglądarki linuksowe prawdopodobnie dotrzymały kroku, ponieważ najtrudniejsza część pracy wydaje się dostosowywać system operacyjny/graficzny do zawierania umów i interfejsów API, aby wiedzieć, czy twoja aplikacja jest widoczna.