Maison > interface Web > js tutoriel > Comment puis-je détecter l'inactivité des fenêtres du navigateur à l'aide de JavaScript ?

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

DDD
Libérer: 2024-12-24 20:18:18
original
731 Les gens l'ont consulté

How Can I Detect Browser Window Inactivity Using 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);
Copier après la connexion

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"});
})();
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal