Comment puis-je détecter l'inactivité des fenêtres du navigateur à l'aide de JavaScript ?

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

Déterminer si une fenêtre du navigateur n'est pas actuellement active peut améliorer l'efficacité des ressources en empêchant l'exécution inutile de code lorsque l'utilisateur n'interagit pas avec le site.

L'API de visibilité de page

Au départ, l'utilisation d'événements de flou/focus de document était l'approche principale. Cependant, le W3C a introduit une méthode plus précise : l'API Page Visibility.

document.addEventListener("visibilitychange", onchange);

Cette API vous avertit lorsque la page devient visible ou masquée pour l'utilisateur.

Compatibilité des navigateurs

L'API Page Visibility est prise en charge par :

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

Remplacement pour les navigateurs incompatibles

Pour les navigateurs qui ne le font pas prennent en charge l'API Page Visibility, le code suivant fournit un solution de secours :

(function() {
  var hidden = "hidden";

  // Standards:
  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);
  // IE 9 and lower:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // All others:
  else
    window.onpageshow = window.onpagehide
    = window.onfocus = window.onblur = onchange;

  function onchange (evt) {
    var v = "visible", h = "hidden",
        evtMap = {
          focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
        };

    evt = evt || window.event;
    if (evt.type in evtMap)
      document.body.className = evtMap[evt.type];
    else
      document.body.className = this[hidden] ? "hidden" : "visible";
  }

  // set the initial state (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});
})();

Ce code garantit la compatibilité avec IE 9 et versions antérieures, ainsi qu'avec les appareils iOS qui utilisent onpageshow et onpagehide au lieu d'événements flou/focus.

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!