Detaillierte Einführung und Anwendungsbeispiele der Tutorialfähigkeiten für HTML5-VisibilityState attribute_html5

Hier muss erklärt werden, dass sich diese „Aktivierung“ darauf bezieht, ob dieses Label vom Benutzer durchsucht wird oder ob es das aktuelle Label ist.

Wofür genau wird diese API verwendet? Normalerweise funktionieren viele herkömmliche Seiten weiterhin, wenn der Benutzer sie nicht aktiviert. Wenn der Benutzer beispielsweise ein Nachrichtenportal durchsucht, wird die zuvor geöffnete NBA-Spieleseite weiterhin aktualisiert, um die neuesten Ergebnisse zu erhalten, und Video-Websites tun dies auch Es wird weiterhin Bandbreite beansprucht. Wenn also zu viel unnötige Arbeit anfällt, wird eine Menge Ressourcen verschwendet. Daher ist dieses Produkt sehr nützlich:

1. Das Webprogramm aktualisiert die Seiteninformationen von Zeit zu Zeit automatisch, um sicherzustellen, dass Benutzer aktuelle Informationen erhalten. Wenn Benutzer jedoch andere Seiten durchsuchen, können sie die Aktualisierung anhalten.
2. Video-Websites laden beim Abspielen von Online-Videos weiterhin Videos, bis das Video geladen ist. Wenn Benutzer jedoch andere Seiten durchsuchen, können sie das Laden von Videoressourcen anhalten, um Bandbreite zu sparen.
3. Auf der Startseite der Website gibt es eine große Diashow, die automatisch abgespielt wird, wenn der Benutzer andere Seiten durchsucht. Die Wiedergabe kann angehalten werden.

Durch die Seitensichtbarkeit können wir also mindestens einen oder mehrere der folgenden Vorteile erzielen:

1. Die Nutzung von Serverressourcen wie Ajax-Polling wird oft ignoriert.
2. Sparen Sie Speicherverbrauch.
3. Sparen Sie Bandbreitenverbrauch.

Daher hat die Verwendung der Seitensichtbarkeit sowohl für den Benutzer als auch für den Server Vorteile.

Das Folgende ist eine formelle Einführung in diese API. Page Visibility fügt dem Dokumentobjekt des Browsers zwei Eigenschaften „hidden“ und „visibilityState“ hinzu. Wenn das aktuelle Tag aktiviert ist, ist der Wert von document.hidden false , andernfalls ist er true . VisibilityState hat 4 mögliche Werte:

1.versteckt: Wenn der Browser minimiert ist, Tabs gewechselt werden oder der Computer gesperrt ist, wird der VisibilityState-Wert ausgeblendet
2.sichtbar: Wenn das Dokument des Browserkontexts auf mindestens einem Bildschirm angezeigt wird, wird „sichtbar“ zurückgegeben. Wenn das Browserfenster nicht minimiert ist, der Browser jedoch von anderen Anwendungen blockiert wird, ist es ebenfalls sichtbar
3.prerender: Gibt prerender zurück, wenn das Dokument außerhalb des Bildschirms geladen wird oder unsichtbar ist. Dies ist ein nicht wesentliches Attribut und der Browser kann es optional unterstützen.
4.unloaded: Gibt unloaded zurück, wenn das Dokument verlassen werden soll (unload). Der Browser kann dieses Attribut auch optional unterstützen

Darüber hinaus wird dem Dokument ein Sichtbarkeitsänderungsereignis hinzugefügt, das ausgelöst wird, wenn sich die Sichtbarkeit des Dokuments ändert.

Okay, nach der Einführung der Attribute fügen wir ein Anwendungsbeispiel ein (kopieren Sie den Code und speichern Sie ihn in einer HTML-Datei, öffnen Sie ihn und wechseln Sie die Tags, um den Effekt zu testen).

Code kopieren

Der Code lautet wie folgt:

<script><br> Funktion browerKernel(){<br> var result;<br> ['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){</p> <p> if( typeof document[ prefix 'Hidden' ] != 'undefined' ){<br> Ergebnis = Präfix;<br> }<br> });<br> Ergebnis zurückgeben;<br> }<br> Funktion init(){<br> Präfix = browerKernel();<br> var showTip = document.getElementById('showTip');<br> document.addEventListener( Präfix 'visibilitychange', Funktion onVisibilityChange(e){<br> var tip = null; <br> if( document[ prefix 'VisibilityState' ] == 'hidden' ) tip = '<p>Seite verlassen</p>';<br> else if( document[ prefix 'VisibilityState' ] == 'visible' ) tip = '<p>Enter page</p>';<br> showTip.innerHTML = showTip.innerHTML-Tipp;<br> });<br> }<br> window.onload = init();<br> </script>

Der Zweck dieser Instanz besteht darin, zu überwachen, ob sich die Sichtbarkeit des Etiketts ändert, und eine Meldung zu generieren, wenn sich die Sichtbarkeit des Etiketts ändert.

Es ist erwähnenswert, dass Browser die Seitensichtbarkeit derzeit noch über private Attribute unterstützen. Wenn Sie also die von der Seitensichtbarkeit bereitgestellten Attribute erkennen oder verwenden, müssen Sie das private Präfix des Browsers hinzufügen, z. B. um das oben genannte in der Eigenschaft „visibilityState“ von Chrome zu erkennen , müssen Sie document.webkitVisibilityState anstelle von document.visibilityState erkennen. Daher erkennt die Demo zunächst den Browsertyp und verwendet dann die Page Visibility API.