Maison  >  Article  >  interface Web  >  Détermination de la visibilité de la page en HTML5 (avec code)

Détermination de la visibilité de la page en HTML5 (avec code)

不言
不言original
2018-08-10 11:14:023753parcourir

Le contenu de cet article porte sur le jugement de la visibilité des pages en HTML5 (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

visibilitychangeÉvénements de page pour déterminer l'état de visibilité de la page actuelle et effectuer certaines tâches de manière ciblée

document.hidden

document.hidden Attributs nouvellement apparaissant, il indique si la page est la page actuellement consultée par l'utilisateur, la valeur est vraie ou fausse. La valeur de

document.visibilityState

visibilityState 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 hidden ( la page La page à onglet n'est pas actuellement active, ou la fenêtre est réduite. ), ou prerender (la page est en cours de régénération et n'est pas visible par l'utilisateur.). 🎜>

Ajouter un écouteur

// 各种浏览器兼容 var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") { 
    hidden = "hidden";
    visibilityChange = "visibilitychange"; 
    state = "visibilityState"; 
} else if (typeof document.mozHidden !== "undefined") { 
    hidden = "mozHidden"; 
    visibilityChange = "mozvisibilitychange";
    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";
 } 
// 添加监听器,在title里显示状态变化
document.addEventListener(visibilityChange, function() { 
    document.title = document[state]; }, false);
// 初始化 
document.title = document[state];
Articles connexes recommandés :

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

document.addEventListener("msvisibilitychange", function() {
  console.log( document.msVisibilityState);
});

document.addEventListener("mozvisibilitychange", function() {
  console.log( document.mozVisibilityState);
});

document.addEventListener("webkitvisibilitychange", function() {
  console.log( document.webkitVisibilityState);
});
Une brève introduction aux méthodes abstraites, aux classes abstraites et aux interfaces en PHP

Qu'est-ce qu'un conteneur (Conteneur) et une façade (Façade) ? Une brève analyse des conteneurs et des façades dans thinkphp5.1

Comment déterminer si le modèle thinkphp est un paiement par téléphone mobile WeChat ou un paiement par scan code WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn