Wie kann ich die Inaktivität eines Browserfensters mit JavaScript erkennen?

Inaktivität des Browserfensters mit JavaScript erkennen

Viele Websites führen periodische Aktivitäten durch, die ressourcenintensiv sein können. Um die Leistung und das Benutzererlebnis zu optimieren, ist es von Vorteil, diese Aktivitäten anzuhalten, wenn der Benutzer die Seite nicht aktiv betrachtet.

Das Problem der Erkennung von Fensterinaktivität

Bestimmen, ob a Die Frage, ob der Benutzer aktiv ein Browserfenster oder eine Browserregisterkarte betrachtet, ist eine grundlegende Herausforderung bei der Webentwicklung. Die Ereignisse window.onfocus und window.onblur bieten grundlegende Funktionen, können jedoch unzuverlässig sein, da Benutzer den Fokus auf andere Registerkarten oder Anwendungen verschieben können, ohne das Fenster zu verlassen.

Die Lösung: Seitensichtbarkeits-API

Eine moderne und zuverlässige Lösung für dieses Problem ist die Page Visibility API. Diese API wird von den meisten gängigen Browsern unterstützt und bietet eine Möglichkeit zu erkennen, wenn eine Seite oder ein Tab aus der Sicht des Benutzers ausgeblendet wird.

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

Leider wird diese API von IE 10 und früheren Versionen nicht unterstützt. Für diese älteren Browser kann ein weniger zuverlässiger Fallback mit onblur/onfocus- und onpageshow/onpagehide-Ereignissen verwendet werden.

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";
  }
}

Durch die Verwendung der Page Visibility API und ihres Fallbacks können Sie Fensterinaktivität effektiv erkennen und Ihre Fenster optimieren Codeleistung entsprechend anpassen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Inaktivität eines Browserfensters mit JavaScript erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!