Wie kann ich mithilfe von JavaScript Inaktivität im Browserfenster erkennen?

Inaktivität eines Browserfensters mit JavaScript erkennen

Die Feststellung, ob ein Browserfenster derzeit nicht aktiv ist, kann die Ressourceneffizienz verbessern, indem unnötige Codeausführung verhindert wird, wenn der Benutzer nicht mit dem Browser interagiert Website.

Die Seitensichtbarkeits-API

Anfangs war die Verwendung von Dokumentenunschärfe-/Fokusereignissen der primäre Ansatz. Das W3C hat jedoch eine genauere Methode eingeführt: die Page Visibility API.

document.addEventListener("visibilitychange", onchange);

Diese API benachrichtigt Sie, wenn die Seite für den Benutzer sichtbar oder ausgeblendet wird.

Browserkompatibilität

Die Page Visibility API wird unterstützt von:

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

Fallback für inkompatible Browser

Für Browser, die dies nicht tun Um die Seitensichtbarkeits-API zu unterstützen, stellt der folgende Code Folgendes bereit: Fallback:

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

  // Standards:
  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);
  // IE 9 and lower:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // All others:
  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 (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});
})();

Dieser Code stellt die Kompatibilität mit IE 9 und niedriger sowie mit iOS-Geräten sicher, die onpageshow und onpagehide anstelle von Unschärfe-/Fokus-Ereignissen verwenden.

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