Wie kann JavaScript inaktive Browserfenster erkennen?

Inaktive Browserfenster mit JavaScript erkennen

Wenn Benutzer eine Website verlassen, kann es von Vorteil sein, bestimmte Aktivitäten anzuhalten. Traditionell fehlte JavaScript eine zuverlässige Methode zur Erkennung von Fensterinaktivität. Glücklicherweise haben Fortschritte bei Webstandards und der Page Visibility API dies möglich gemacht.

Page Visibility API

Mit der Page Visibility API können Entwickler den Sichtbarkeitsstatus einer Website bestimmen. Durch das Abonnieren des Ereignisses „visibilitychange“ können Sie erkennen, wann das Fenster sichtbar oder ausgeblendet wird. Die Browserunterstützung für die API umfasst:

• Chrome 13
• Internet Explorer 10
• Firefox 10
• Opera 12.10

document.addEventListener("visibilitychange", onchange);

Fallback für Inkompatibilität Browser

Für Browser, die die Page Visibility API nicht unterstützen, können Sie eine Fallback-Methode verwenden, die auf Ereignissen wie „Unschärfe“ und „Fokus“ basiert. Diese Methode ist weniger zuverlässig, kann aber verwendet werden, um eine ähnliche Funktionalität zu erreichen.

(function() {
  // Check for standards support
  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);
  }
  
  // Fallback for IE 9+
  else if ("onfocusin" in document) {
    document.onfocusin = document.onfocusout = onchange;
  }
  
  // Event mapping
  function onchange(evt) {
    var hiddenMapping = {
      focus: "visible",
      focusin: "visible",
      pageshow: "visible",
      blur: "hidden",
      focusout: "hidden",
      pagehide: "hidden"
    };
  
    evt = evt || window.event;
    if (evt.type in hiddenMapping) {
      document.body.className = hiddenMapping[evt.type];
    } else {
      document.body.className = document[hidden] ? "hidden" : "visible";
    }
  }
  
  // Set initial state
  if (document[hidden] !== undefined) {
    onchange({
      type: document[hidden] ? "blur" : "focus"
    });
  }
})();

Beispielimplementierung

Das folgende Beispiel zeigt, wie die Seitensichtbarkeits-API verwendet wird, um die Skriptausführung anzuhalten, wenn a Browserfenster ist inaktiv:

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

Durch die Nutzung der Seitensichtbarkeits-API und der JavaScript-Ereignisbehandlung können Sie jetzt Aktivitäten basierend auf dem Sichtbarkeitsstatus effektiv anhalten oder fortsetzen ein Browserfenster.

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