Comment JavaScript peut-il détecter les fenêtres de navigateur inactives ?

Détection des fenêtres de navigateur inactives avec JavaScript

Lorsque les utilisateurs quittent un site Web, il peut être avantageux de suspendre certaines activités. Traditionnellement, JavaScript manquait d’une méthode fiable pour détecter l’inactivité des fenêtres. Heureusement, les progrès des normes Web et de l'API Page Visibility ont rendu cela possible.

API Page Visibility

L'API Page Visibility permet aux développeurs de déterminer l'état de visibilité d'un site Web. En vous abonnant à l'événement "visibilitychange", vous pouvez détecter quand la fenêtre devient visible ou masquée. La prise en charge du navigateur pour l'API inclut :

• Chrome 13
• Internet Explorer 10
• Firefox 10
• Opera 12.10

document.addEventListener("visibilitychange", onchange);

Retour en cas d'incompatibilité Navigateurs

Pour les navigateurs qui ne prennent pas en charge l'API Page Visibility, vous pouvez utiliser une méthode de secours basée sur des événements tels que « flou » et « focus ». Cette méthode est moins fiable, mais elle peut être utilisée pour obtenir des fonctionnalités similaires.

(function() {
  // Check for standards support
  var hidden = "hidden";
  if (hidden in document) {
    document.addEventListener("visibilitychange", onchange);
  } else if ((hidden = "mozHidden") in document) {
    document.addEventListener("mozvisibilitychange", onchange);
  } else if ((hidden = "webkitHidden") in document) {
    document.addEventListener("webkitvisibilitychange", onchange);
  } else if ((hidden = "msHidden") in document) {
    document.addEventListener("msvisibilitychange", onchange);
  }
  
  // Fallback for IE 9+
  else if ("onfocusin" in document) {
    document.onfocusin = document.onfocusout = onchange;
  }
  
  // Event mapping
  function onchange(evt) {
    var hiddenMapping = {
      focus: "visible",
      focusin: "visible",
      pageshow: "visible",
      blur: "hidden",
      focusout: "hidden",
      pagehide: "hidden"
    };
  
    evt = evt || window.event;
    if (evt.type in hiddenMapping) {
      document.body.className = hiddenMapping[evt.type];
    } else {
      document.body.className = document[hidden] ? "hidden" : "visible";
    }
  }
  
  // Set initial state
  if (document[hidden] !== undefined) {
    onchange({
      type: document[hidden] ? "blur" : "focus"
    });
  }
})();

Exemple de mise en œuvre

L'exemple suivant montre comment utiliser l'API Page Visibility pour suspendre l'exécution du script lorsqu'un la fenêtre du navigateur est inactive :

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    // Pause script execution
  } else {
    // Resume script execution
  }
});

En tirant parti de l'API de visibilité des pages et de la gestion des événements JavaScript, vous pouvez désormais suspendre ou reprendre efficacement les activités en fonction de l'état de visibilité d'un fenêtre du navigateur.

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!