Comment JavaScript peut-il détecter l'inactivité de la fenêtre du navigateur ?

Détection de l'inactivité de la fenêtre du navigateur à l'aide de JavaScript

Déterminer si une fenêtre du navigateur n'est pas activement mise au point est essentiel pour optimiser les performances et l'expérience utilisateur. JavaScript propose plusieurs options pour y parvenir.

API de visibilité de page

L'API de visibilité de page offre une méthode fiable pour détecter lorsqu'une page est masquée à l'utilisateur. Cette API est prise en charge par la plupart des navigateurs modernes, notamment Chrome, Firefox et Internet Explorer.

Pour utiliser l'API Page Visibility, ajoutez l'écouteur d'événement suivant :

document.addEventListener("visibilitychange", onchange);

Dans la fonction onchange , vous pouvez vérifier la propriété document.visibilityState pour déterminer si la page est masquée ou visible :

function onchange(evt) {
  if (document.visibilityState == "hidden") {
    // Page is not active
  } else {
    // Page is active
  }
}

Retour à Événements de flou/focus

Pour les navigateurs qui ne prennent pas en charge l'API Page Visibility, vous pouvez recourir à des événements de flou et de focus. Cette méthode est moins fiable, car elle peut se déclencher lorsque l'utilisateur change d'onglet ou ouvre une fenêtre modale.

Pour utiliser les événements de flou/focus, ajoutez les écouteurs d'événements suivants :

window.onblur = function() {
  // Window is not active
};

window.onfocus = function() {
  // Window is active
};

Considérations de compatibilité

L'API de visibilité de page est prise en charge par la plupart des principaux navigateurs, tandis que les événements de flou/focus sont pris en charge par tous les navigateurs modernes. navigateurs. Pour une compatibilité maximale, envisagez d'utiliser l'API Page Visibility si elle est prise en charge et revenez aux événements de flou/focus dans le cas contraire.

En mettant en œuvre ces techniques, vous pouvez détecter efficacement lorsqu'une fenêtre de navigateur n'est pas activement mise au point et ajuster votre JavaScript en conséquence, améliorant les performances et l'expérience utilisateur sur votre site Web.

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!