Comment déterminer si l'utilisateur parcourt la page dans les compétences du didacticiel HTML5_html5

Désormais, l'interface de visibilité des pages en HTML5 fournit aux programmeurs une méthode qui leur permet d'utiliser l'événement de page visiblechange pour déterminer l'état de visibilité de la page actuelle et effectuer certaines tâches de manière ciblée. Il existe également une nouvelle propriété document.hidden disponible.

document.hidden

Ce nouvel attribut document.hidden indique si la page est la page actuellement consultée par l'utilisateur. La valeur est vraie ou fausse.

document.visibilityState

La valeur de visibilitéState est soit visible (indiquant que la page est l'onglet actuellement activé du navigateur et que la fenêtre n'est pas réduite), soit masquée (la page n'est pas la page à onglet actuellement activée, ou la fenêtre est réduite .), ou pré-rendu (la page Régénération, non visible par l'utilisateur ).

événement de changement de visibilité

Écouter les changements de visibilité de la page est très simple :

Copiez le code

Le code est le suivant :

// Compatible avec différents navigateurs
var caché, état, visibilitéChange;
if (typeof document.hidden !== "undefined") {
caché = "caché";
visibilitéChange = "visibilitéchange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
caché = "mozHidden";
visibilitéChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
caché = "msHidden";
visibilitéChange = "msvisibilitychange";
état = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
caché = "webkitHidden";
visibilitéChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

//Ajouter un écouteur pour afficher les changements d'état dans le titre
document.addEventListener(visibilityChange, function() {
document.title = document[état];
}, faux);

//Initialisation
document.title = document[état];

Le code ci-dessus modifiera la valeur de document.title lorsque la visibilité de la page changera !

Alors, quand devez-vous utiliser l'événement visiblechange ? Par exemple, si une vidéo intégrée est en cours de lecture sur votre page, lorsque l'utilisateur passe à un autre onglet, la vidéo sur votre onglet doit automatiquement se mettre en pause et reprendre la lecture lorsque l'utilisateur revient. Pour un autre exemple, si votre page dispose d'une action d'actualisation automatique, lorsque l'utilisateur passe à un autre onglet, vous devez arrêter l'actualisation et continuer l'action précédente lorsque l'utilisateur revient.