Implémenter le contrôle de la visibilité des pages à l'aide de l'API HTML5 Page Visibility

Auparavant, nos navigateurs n'avaient pas de fonctionnalité de navigation par onglets, mais aujourd'hui, lorsque vous regardez tous les navigateurs disponibles, nous pouvons voir que tous les navigateurs offrent cette fonctionnalité. En tant que programmeur, j'ai généralement 10 à 15 onglets ouverts à la fois, et parfois ce nombre dépasse 25 à 30.

Pourquoi utiliser cette API ?

Auparavant, il n'existait aucun moyen de déterminer quel onglet était actif et quel onglet était actif, mais avec l'API de visibilité HTML5, nous pouvons détecter si un visiteur consulte notre page Web.

Dans ce tutoriel, nous apprendrons comment gérer l'API de visibilité HTML5 et une démonstration simple pour découvrir l'état de la page. Dans cette démo, nous modifierons le titre du document en fonction de l'état de visibilité de la page.

Vérifier l'état de visibilité de la page

Avec le lancement de cette API, nous accueillons deux nouvelles propriétés de document qui remplissent deux fonctions différentes. Le premier est document.visibilityState，第二个是 document.hidden.

document.visibilityState contient quatre valeurs différentes comme suit :

• Masquer : La page n'est visible sur aucun écran
• Pré-rendu : La page se charge hors écran et est invisible pour l'utilisateur

• Visible : Page visible

• Déchargé : La page est sur le point d'être déchargée (l'utilisateur quitte la page en cours)

document.hidden est une propriété booléenne qui est définie sur false si la page est visible et true si la page est masquée.

Nous pouvons désormais contrôler le comportement de notre site Web lorsqu'il est masqué aux utilisateurs.

Nous connaissions tout de suite notre propriété de disponibilité, mais il est maintenant temps d'écouter l'événement afin d'être avertis des nouvelles situations concernant la visibilité de la page. Cela se fait via l'événement visibilitychange. Nous verrons une démonstration rapide sur la façon de gérer cet événement.

document.addEventListener('visibilitychange', function(event) {
  if (!document.hidden) {
    // The page is visible.
  } else {
   // The page is hidden. 
  }
});

Ce code n'est qu'un exemple de base d'utilisation de cet événement et de découverte de l'état actuel de la page Web. Mais juste pour que vous le sachiez, ces propriétés et méthodes doivent toutes être préfixées par le fournisseur, car ces événements et propriétés sont préfixés par le fournisseur dans certains navigateurs. Nous verrons maintenant le même code sur tous les navigateurs :

// Get Browser-Specifc Prefix
function getBrowserPrefix() {
  
  // Check for the unprefixed property.
  if ('hidden' in document) {
    return null;
  }

  // All the possible prefixes.
  var browserPrefixes = ['moz', 'ms', 'o', 'webkit'];

  for (var i = 0; i < browserPrefixes.length; i++) {
    var prefix = browserPrefixes[i] + 'Hidden';
    if (prefix in document) {
      return browserPrefixes[i];
    }
  }

  // The API is not supported in browser.
  return null;
}

// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
  if (prefix) {
    return prefix + 'Hidden';
  } else {
    return 'hidden';
  }
}

// Get Browser Specific Visibility State
function visibilityState(prefix) {
  if (prefix) {
    return prefix + 'VisibilityState';
  } else {
    return 'visibilityState';
  }
}

// Get Browser Specific Event
function visibilityEvent(prefix) {
  if (prefix) {
    return prefix + 'visibilitychange';
  } else {
    return 'visibilitychange';
  }
}

Nous avons toutes les propriétés du préfixe du navigateur et les événements sont prêts à être appliqués. Nous allons maintenant modifier le code précédent en conséquence.

// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);

document.addEventListener(visibilityEvent, function(event) {
  if (!document[hidden]) {
    // The page is visible.
  } else {
   // The page is hidden. 
  }
});

Où pouvons-nous utiliser cette API ?

Nous pouvons envisager d'utiliser cette API dans de nombreux scénarios différents.

1. Supposons que vous soyez sur votre tableau de bord et que la page interroge à intervalles réguliers (disons deux minutes) les détails d'un flux RSS ou d'une API. Par conséquent, nous pouvons limiter les appels au flux RSS ou à l'API si la page n'est pas visible par l'utilisateur (c'est-à-dire que l'utilisateur ne consulte pas réellement la page).
2. Pour le curseur d'image. Nous pouvons limiter le mouvement de l'image du curseur lorsque la page est masquée.

3. De la même manière, nous pouvons afficher une notification HTML uniquement lorsque la page est masquée à l'utilisateur.

Jusqu'à présent, nous avons vu le code utilisant l'API HTML5 Page Visibility, il est temps de prendre des mesures immédiates.

Démo

• Démo 1 : cette démo montre comment utiliser l'API Page Visibility pour modifier le titre de la page. Voir la démo
• Démo 2 : Cette démo montre comment restreindre les données d'interrogation du serveur lorsque la page est inactive.

Dans cette démo, nous verrons comment restreindre l'interrogation du serveur pour obtenir les dernières informations, mais uniquement pendant que l'utilisateur consulte la page. Je suppose que jQuery est déjà inclus dans votre page. Ici, nous allons simplement incrémenter le décompte, mais cela pourrait être remplacé par une véritable interrogation du serveur.

HTML

<!-- This element will show updated count -->
<h1 id="valueContainer">0</h1>

JavaScript

<script type="text/javascript">
    
	// Get Browser Prefix
	var prefix = getBrowserPrefix();
	var hidden = hiddenProperty(prefix);
	var visibilityState = visibilityState(prefix);
	var visibilityEvent = visibilityEvent(prefix);
	
	var timer = null;
	
	function increaseVal() {
		var newVal = parseInt($('#valueContainer').text()) + parseInt(1);
		$('#valueContainer').text(newVal);
		document.title = newVal + ': Running'; 
		
		timer = setTimeout(function() {
			increaseVal();
        }, 1);
	}
	
	// Visibility Change 
	document.addEventListener(visibilityEvent, function(event) {
		  if (document[hidden]) {
			  clearTimeout(timer);
			  var val = parseInt($('#valueContainer').text());
			  document.title = val + ': Pause'; 
		  } else {
			  increaseVal();  
		  }
	});
	
	increaseVal();
	
</script>

Vue démo

Prise en charge du navigateur

Si vous souhaitez vérifier la prise en charge de cette API par le navigateur, je vous recommande de consulter Puis-je l'utiliser ? . Mais pour trouver la prise en charge du navigateur par programmation, je vous recommande de lire cet article pour détecter la prise en charge de diverses fonctionnalités HTML5. Jusqu'à présent, nous bénéficions d'un bon support pour cette API dans presque tous les navigateurs majeurs et les plus récents.

Conclusion

Je dirais que nous avons une très belle API qui se compose uniquement de deux propriétés et d'un événement. De cette façon, il peut être facilement intégré à vos applications existantes, ce qui peut avoir un impact positif sur votre expérience utilisateur. Enfin, nous pouvons désormais contrôler le comportement de nos sites lorsqu'ils sont masqués aux utilisateurs.

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!