Wie kann ich inaktive Browserfenster mithilfe von JavaScript erkennen?

Inaktive Browserfenster erkennen

Beim Arbeiten mit JavaScript kann es hilfreich sein, festzustellen, ob das Browserfenster derzeit inaktiv ist. Dadurch können Sie die Leistung optimieren, indem Sie unnötige Aufgaben anhalten, wenn der Benutzer die Seite nicht anzeigt.

Verwendung der Page Visibility API

Eine zuverlässige Möglichkeit, Browser-Inaktivität zu erkennen, ist über die Page Visibility API. Diese API stellt eine „versteckte“ Eigenschaft bereit, die angibt, ob die Seite für den Benutzer sichtbar ist oder nicht.

document.addEventListener("visibilitychange", onchange);

Wenn die „versteckte“ Eigenschaft wahr ist, ist die Seite derzeit nicht aktiv. Sie können diese Informationen verwenden, um JavaScript-Vorgänge entsprechend anzuhalten oder zu minimieren.

Browserkompatibilität

Die Page Visibility API wird von den neuesten Versionen der wichtigsten Browser unterstützt, einschließlich Chrome, Internet Explorer, Firefox und Opera.

Fallback für Inkompatibel Browser

Für Browser, die die Page Visibility API nicht unterstützen, können Sie auf die Unschärfe-/Fokus-Methoden zurückgreifen. Diese Ereignisse sind weniger zuverlässig, können aber eine grundlegende Erkennungsebene bieten.

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

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

Implementierungsbeispiel

Der folgende Code zeigt, wie die Seitensichtbarkeits-API verwendet wird und die Fallback-Methoden zur Erkennung inaktiver Browserfenster:

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

Das obige ist der detaillierte Inhalt vonWie kann ich inaktive Browserfenster mithilfe von JavaScript erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!