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

Détection de l'inactivité des fenêtres du navigateur avec JavaScript

De nombreux sites Web effectuent des activités périodiques qui peuvent nécessiter beaucoup de ressources. Pour optimiser les performances et l'expérience utilisateur, il est avantageux de suspendre ces activités lorsque l'utilisateur ne consulte pas activement la page.

Le problème de la détection de l'inactivité des fenêtres

Déterminer si un L’utilisateur qui consulte activement une fenêtre ou un onglet de navigateur constitue un défi fondamental dans le développement Web. Les événements window.onfocus et window.onblur fournissent des fonctionnalités de base, mais ils peuvent ne pas être fiables car les utilisateurs peuvent déplacer le focus vers d'autres onglets ou applications sans quitter la fenêtre.

La solution : API de visibilité des pages

La solution : API de visibilité des pages

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

Une solution moderne et fiable à ce problème est l'API Page Visibility. Prise en charge par la plupart des principaux navigateurs, cette API permet de détecter lorsqu'une page ou un onglet devient masqué à la vue de l'utilisateur.

var hidden = "hidden";

// Compatibility checks
if (hidden in document) {
  // Supported: Page Visibility API
} else if ((hidden = "mozHidden") in document) {
  // Mozilla-specific
} else if ((hidden = "webkitHidden") in document) {
  // WebKit-based
} else if ((hidden = "msHidden") in document) {
  // Microsoft-specific
} else {
  // Legacy events
}

function onchange(evt) {
  if (evt.type in evtMap) {
    document.body.className = evtMap[evt.type];
  } else {
    document.body.className = this[hidden] ? "hidden" : "visible";
  }
}

Malheureusement, cette API n'est pas prise en charge par IE 10 et versions antérieures. Pour ces navigateurs plus anciens, une solution de secours moins fiable impliquant les événements onblur/onfocus et onpageshow/onpagehide peut être utilisée.

En utilisant l'API Page Visibility et sa solution de secours, vous pouvez détecter efficacement l'inactivité des fenêtres et optimiser votre performances du code en conséquence.

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!