So ermitteln Sie im HTML5-Tutorial, ob der Benutzer die Seite durchsucht-H5-Tutorial-php.cn

So ermitteln Sie im HTML5-Tutorial, ob der Benutzer die Seite durchsucht

WBOY

Freigeben： 2016-05-16 15:47:53

Original

1719 Leute haben es durchsucht

Jetzt stellt die Seitensichtbarkeitsschnittstelle in HTML5 Programmierern eine Methode zur Verfügung, mit der sie mithilfe des Seitenereignisses „visibilitychange“ den Sichtbarkeitsstatus der aktuellen Seite ermitteln und bestimmte Aufgaben gezielt ausführen können. Es ist auch eine neue document.hidden-Eigenschaft verfügbar.

document.hidden

Dieses neue document.hidden-Attribut zeigt an, ob es sich bei der Seite um die aktuell vom Benutzer angezeigte Seite handelt. Der Wert ist wahr oder falsch.

document.visibilityState

Der Wert von VisibilityState ist entweder sichtbar (was anzeigt, dass es sich bei der Seite um die aktuell aktivierte Registerkarte des Browsers handelt und das Fenster nicht minimiert ist) oder ausgeblendet (die Seite ist nicht die aktuell aktivierte Registerkarte oder das Fenster ist minimiert). .) oder Prerender (die Seite wird neu generiert, für den Benutzer nicht sichtbar).

Sichtbarkeitsänderungsereignis

Das Abhören von Änderungen der Seitensichtbarkeit ist sehr einfach:

Kopieren Sie den Code

Der Code lautet wie folgt:

// Kompatibel mit verschiedenen Browsern
var versteckt, Zustand, SichtbarkeitÄnderung; if (typeof document.hidden !== "undefiniert") {
versteckt = "versteckt";
VisibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefiniert") {
versteckt = "mozHidden";
VisibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefiniert") {
versteckt = "msHidden";
VisibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefiniert") {
versteckt = "webkitHidden";
VisibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

//Fügen Sie einen Listener hinzu, um Statusänderungen im Titel anzuzeigen
document.addEventListener(visibilityChange, function() {
document.title = document[state];
}, false);

//Initialisierung
document.title = document[state];

Der obige Code ändert den Wert von document.title, wenn sich die Sichtbarkeit der Seite ändert!
Wann müssen Sie also das Sichtbarkeitsänderungsereignis verwenden? Wenn auf Ihrer Seite beispielsweise ein eingebettetes Video abgespielt wird und der Benutzer zu einem anderen Tab wechselt, sollte das Video auf Ihrem Tab automatisch angehalten und wieder abgespielt werden, wenn der Benutzer zurückwechselt. Wenn Ihre Seite beispielsweise über eine automatische Aktualisierungsaktion verfügt und der Benutzer zu einer anderen Registerkarte wechselt, sollten Sie die Aktualisierung stoppen und die vorherige Aktion fortsetzen, wenn der Benutzer zurückwechselt.