Commentaire: Nous manquons depuis longtemps une méthode pour déterminer si un utilisateur parcourt un onglet spécifié. Les utilisateurs ont-ils visité d'autres sites Web? Ont-ils retiré?
Désormais, l'interface de visibilité de la page dans HTML5 fournit aux programmeurs une méthode pour utiliser l'événement de page VisibilityChange pour juger de l'état de visibilité de la page actuel et effectuer certaines tâches de manière ciblée. Il existe également un nouveau document.
Document.Hidden
Cette propriété Document nouvellement apparente.HIDENDEN montre si la page est la page actuellement consultée par l'utilisateur, avec une valeur de Ture ou False.
Document.VisibilityState
La valeur de VisibilityState est soit visible (indique que la page est actuellement activée par le navigateur, et la fenêtre n'est pas minimisée), ou cachée (la page n'est pas actuellement activée par la page d'onglet, ou la fenêtre est minimisée.), Ou PRÉRENDER (La page est régénérante et n'est pas visible à l'utilisateur.).
Événement VisibilityChange
Il est très facile d'écouter les changements de visibilité sur la page:
// compatible avec divers navigateurs
var caché, état, VisibilityChange;
if (typeof document.hidden! == "Undefined") {
Hidden = "Hidden";
VisibilityChange = "VisibilityChange";
state = "VisibilityState";
} else if (typeof document.mozhidden! == "Undefined") {
Hidden = "Mozhidden";
VisibilityChange = "MozVissibilityChange";
state = "mozVisibilityState";
} else if (typeof document.mshidden! == "Undefined") {
Hidden = "Mshidden";
VisibilityChange = "msVisibilityChange";
state = "msVisibilityState";
} else if (typeof document.webKithIdden! == "Undefined") {
Hidden = "webKithIdden";
VisibilityChange = "WebkitVisibilityChange";
state = "webkitVisibilityState";
} </p> <p> // Ajouter un écouteur pour les modifications d'état d'affichage dans le titre
document.addeventListener (VisibilityChange, function () {
document.title = document [état];
}, false); </p> <p> // initialisation
document.title = document [état];
Le code ci-dessus modifiera la valeur de Document.Title lorsque la visibilité de la page change!
Alors, quand avez-vous besoin d'utiliser l'événement VisibilityChange? Par exemple, s'il y a une vidéo intégrée sur votre page qui est en lecture, lorsque l'utilisateur passe à un autre onglet, la vidéo de votre onglet devrait automatiquement mettre en pause la lecture et continuer à jouer lorsque l'utilisateur revient. Par exemple, si votre page a une action de rafraîchissement automatique, lorsque l'utilisateur passe à d'autres onglets, vous devez arrêter le rafraîchissement et continuer l'action précédente lorsque l'utilisateur revient.