Comment puis-je détecter les fenêtres de navigateur inactives à l'aide de JavaScript ?

Détection des fenêtres de navigateur inactives

Lorsque vous travaillez avec JavaScript, il peut être avantageux de déterminer si la fenêtre du navigateur est actuellement inactive. Cela vous permet d'optimiser les performances en interrompant les tâches inutiles lorsque l'utilisateur ne consulte pas la page.

Utiliser l'API de visibilité de la page

Un moyen fiable de détecter l'inactivité du navigateur est via l'API de visibilité de la page. Cette API fournit une propriété "cachée" qui indique si la page est visible ou non par l'utilisateur.

document.addEventListener("visibilitychange", onchange);

Si la propriété "cachée" est vraie, la page n'est actuellement pas active. Vous pouvez utiliser ces informations pour suspendre ou minimiser les opérations JavaScript en conséquence.

Compatibilité des navigateurs

L'API Page Visibility est prise en charge par les dernières versions des principaux navigateurs, notamment Chrome, Internet Explorer, Firefox et Opera.

Remplacement en cas d'incompatibilité Navigateurs

Pour les navigateurs qui ne prennent pas en charge l'API Page Visibility, vous pouvez recourir aux méthodes de flou/focus. Ces événements sont moins fiables, mais ils peuvent fournir un niveau de détection de base.

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

  // ... (code for fallbacks to blur/focus)
})();

Exemple d'implémentation

Le code ci-dessous montre comment utiliser l'API de visibilité de page. et les méthodes de secours pour détecter les fenêtres de navigateur inactives :

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);
else if ("onfocusin" in document)
  document.onfocusin = document.onfocusout = onchange;
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
if (document[hidden] !== undefined)
  onchange({ type: document[hidden] ? "blur" : "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!