Tytuł wyjaśnia się. Jak mogę wykryć, czy strona internetowa poszła na tło?

Wdrażam aplikację czatu i użyję tych informacji, aby zdecydować, pokazując nowe powiadomienia o wiadomościach. Przypuszczam, że Gmail używa czegoś takiego. Jeśli strona jest na tle, pokazuje powiadomienia pulpitu (na chromie), jeśli nie pokazuje ich.

9
Çağatay Gürtürk 23 listopad 2011, 03:02

3 odpowiedzi

Najlepsza odpowiedź

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 nacisk. Nie ma powodu, aby ustawić własną zmienną.

Oto dowód kodu koncepcyjnego. JSFiddle znajduje się na dole. Co 3 sekundy sprawdzi, czy okno będzie ustawione lub nie jest wyświetlane prawdziwe lub fałszywe.

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 Dokument Gotowy:

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/

12
natedavisolds 22 listopad 2011, 23:33

Jest teraz a API Widoczność strony dla tego i jest dobrze wspierany przez Wszystkie najnowsze wersje głównych przeglądarek w systemie Windows, Mac OS X i Linux (choć w rzeczywistości nie przetestowałem wszystkich przeglądarek z uczciwym udziałem na rynku przeglądarki Linuksa).

API widoczności strony jest obecnie najlepszym podejściem do sprawdzania widoczności; Jedynym zastrzeżeniem są to, że nie można powiedzieć, jakie części okna przeglądarki są widoczne (tylko że nic nie jest widoczne lub przynajmniej jedna część), a wsparcie było obecne od 2016 r. W Linuksie, 2015 na Mac, i 2014 (ewentualnie wcześniej) na oknach.

Podczas gdy wsparcie zostało wycofane, fałszywy negatywny był rzadki, ale na niektórych platformach wystąpiły fałszywe pozytywy; Na przykład w 2014 r. OSX renderował miniaturowe wersje zminimalizowanych aplikacji w doku, aw wyniku sposobu, w jaki został to wykonane, aplikacja nie mogła łatwo powiedzieć, czy została zminimalizowana, ponieważ nadal poproszono o pomalowanie ekranu. Linux miał komplikacje z wiedząc, czy twoja aplikacja była na niewidocznym obszarze roboczym i czy innym okno go okludzie.

Pierwszy projekt publiczny został opublikowany w czerwcu 2011 r. I osiągnął status "zalecenie" w maju 2013 r. Do marca 2014 r., Najnowsze wersje wszystkich głównych przeglądarek Windows miał pełną obsługę dla standardu. Pełna obsługa wszystkich głównych przeglądarek Mac została osiągnięta w kwietniu 2015 r. Wsparcie Linuksa zostało osiągnięte dla co najmniej Chromium do sierpnia 2016 r. (Kiedy Wydanie chromu 293128 zostało zamknięte); Chociaż ich nie przetestowałem, oczekuję, że inne przeglądarki Linuksa prawdopodobnie utrzymywali tempo, ponieważ najtrudniejsza część pracy wydaje się dostosować OS / GUI Umowy i API, aby wiedzieć, czy aplikacja pulpitu jest możliwa.

7
Theodore Murdock 13 październik 2017, 22:06

Możesz wiązać się z window i blur i focus. Oto kod fragmentowy z Aplikacja, którą napisałem:

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

$(window).bind("focus", function() {
  Chatterbox.set_focused(true);
});
4
Michelle Tilley 22 listopad 2011, 23:07