Kommentar: HTML5 hat eine sehr "spezielle" API -Seite -Sichtbarkeit gestartet. Der Grund, warum es besonders ist
Hier muss erklärt werden, dass sich diese "Aktivierung" darauf bezieht, ob das Tag vom Benutzer durchsucht wird oder ob es sich um das aktuelle Tag handelt.
Was ist der Zweck dieser API? Normalerweise funktionieren viele herkömmliche Seiten weiter, wenn der Benutzer ihn nicht aktiviert. Wenn der Benutzer beispielsweise das News -Portal stöbert und die NBA -Spielseite, die er zuvor eröffnet hat, weiter aktualisiert und die neuesten Ergebnisse erzielt, wird die Video -Website weiterhin Bandbreite besetzen und Ressourcen laden. Wenn daher zu viel unnötige Arbeit erforderlich ist, werden viele Ressourcenabfälle verursacht. Daher ist das sehr nützlich:
1. Das Webprogramm aktualisiert die Seiteninformationen von Zeit zu Zeit automatisch, um sicherzustellen, dass der Benutzer zeitnahe Informationen erhält. Wenn der Benutzer jedoch andere Seiten durchstürzt, kann er gesteuert werden, um Updates zu pausieren.
2. Wenn die Video -Website Online -Video abgespielt wird, wird das Video kontinuierlich geladen, bis das Video geladen ist. Wenn der Benutzer jedoch auf anderen Seiten stöbert, kann er das Laden von Videoressourcen zum Speichern von Bandbreite pausieren.
3.. Auf der Homepage der Website befindet sich eine große Folie, die automatisch abgespielt wird. Wenn der Benutzer auf anderen Seiten durchsucht, kann die Wiedergabe angehalten werden.
Durch die Sichtbarkeit von Seiten können wir daher mindestens einen oder mehrere der folgenden Vorteile erzielen:
1. Speichern Serverressourcen. Ajax -Umfragen werden oft ignoriert. Schließen Sie diese Anfrage können Ressourcen sparen.
2. Speichern Sie den Speicherverbrauch.
3.. Bandbreitenkonsum speichern.
Daher ist die Verwendung der Sichtbarkeit von Seiten sowohl für Benutzer als auch für Server von Vorteil.
Lassen Sie uns als nächstes diese API offiziell vorstellen. Die Sichtbarkeit von Seite fügt zwei versteckte Eigenschaften und Sichtbarkeitsstände im Dokumentobjekt des Browsers hinzu. Wenn das aktuelle Tag aktiviert ist, ist der Wert von document.hidden falsch, ansonsten wahr. VissibilityState hat 4 mögliche Werte:
1. Hidden: Wenn der Browser minimiert wird, schaltet die Tags und sperrt den Computerbildschirm, der Sichtbarkeitswert ist versteckt
2. Sichtbar: Wenn das Dokument des obersten Kontextes des Browsers in mindestens einem Bildschirm angezeigt wird, gibt es sichtbar zurück. Wenn das Browserfenster nicht minimiert ist, der Browser jedoch durch andere Anwendungen blockiert wird, ist es auch sichtbar
3.PRERENDER: Rücksendes Ertrag, wenn das Dokument außerhalb des Bildschirms geladen wird oder unsichtbar ist. Dies ist eine nicht wesentliche Eigenschaft und der Browser kann sie selektiv unterstützen.
4. Ungeladen: Return entladen, wenn das Dokument hinterlassen wird (entladen), und der Browser kann diese Eigenschaft auch selektiv unterstützen.
Darüber hinaus wird das Ereignis zum SichtbarkeitsChange in das Dokument hinzugefügt, das ausgelöst wird, wenn sich die Sichtbarkeit des Dokuments ändert.
Okay, nach der Einführung der Eigenschaften ein Nutzungsbeispiel (kopieren Sie den Code und speichern Sie ihn in eine HTML -Datei, wechseln Sie die Tags, um den Effekt nach dem Öffnen zu testen).
<! docType html>
<html lang = "zh-cn">
<kopf>
<meta charset = "utf-8" />
<title> Test HTML5 -Seite Sichtbarkeits API </title>
</head>
<body> </p> <p> <div> </div>
<Script>
Funktion Browserkernel () {
var Ergebnis;
['Webkit', 'Moz', 'O', 'ms']. foreach (Funktion (Präfix) {</p> <p> if (Typeof Dokument [Präfix + 'Hidden']! = 'undefined') {
Ergebnis = Präfix;
}
});
Rückgabeergebnis;
}
Funktion init () {
Präfix = BrowserKernel ();
var showtip = document.getElementById ('showtip');
document.adDeVentListener (Präfix + 'VisibilityChange', Funktion onvisibilityChange (e) {
var tip = null;
if (document [Präfix + 'SichtbarkeitState'] == 'Hidden') Tip = '<p> die Seite </p>' verlassen;
else if if (document [Präfix + 'Sichtbarkeitsstatus'] == 'sichtbar') Tip = '<p> Geben Sie die Seite </p>' ein;
showtip.innerhtml = showtip.innerhtml + Tipp;
});
}
window.onload = init ();
</script>
</body>
</html>
Ziel dieses Beispiels ist es, zu überwachen, ob sich die Sichtbarkeit des Tags ändert und eine Eingabeaufforderung erstellt, wenn sich die Sichtbarkeit des Tags ändert.
Es ist erwähnenswert, dass die Browser derzeit immer noch die Sichtbarkeit von Seiten durch private Attribute unterstützen. Bei der Erkennung oder Verwendung von Eigenschaften, die durch die Sichtbarkeit von Seite bereitgestellt werden, müssen Sie daher ein privates Präfix eines Browsers hinzufügen. Wenn Sie beispielsweise die obige Sichtbarkeitsstätte in Chrome erkennen, müssen Sie das Dokument erkennen. Daher erkennt die Demo zuerst den Browsertyp und verwendet dann die Sichtbarkeits -API.