Comment vérifier si un onglet du navigateur est actif ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-03-27 11:16:00
Thèmes : html - navigateur - javascript - page
Question

Bonjour, Existe-t-il un moyen, lorsque plusieurs onglets et pages sont ouvertes dans un navigateur, de vérifier si l'une des pages est active, c'est à dire si l'onglet est sélectionné ?

Réponse

Pour vérifier si une page est ouverte et visible dans le navigateur, vous pouvez utiliser l'évènement JavaScript visibilitychange et la propriété visibilityState.

Dans l'exemple ci-dessous, on ferme automatiquement le page lorsqu'elle n'est plus visible, c'est à dire, soit lorsque l'utilisateur a changé d'onglet, soit lorsqu'il a diminué le navigateur :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment vérifier si un onglet du navigateur est actif ?</title>
</head>
<body>
<script>
document.addEventListener("visibilitychange", function()
{
  if (document.visibilityState === 'hidden')
  {
    window.close();
  }
});
</script>
</body>
</html>

Vous trouverez d'avantage d'information sur la propriété visibilityState et ses différents valeurs possibles via cette page du site de Mozilla.