Heim > Web-Frontend > js-Tutorial > Wie kann ich mithilfe von JavaScript Inaktivität im Browserfenster erkennen?

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

DDD
Freigeben: 2024-12-24 20:18:18
Original
731 Leute haben es durchsucht

How Can I Detect Browser Window Inactivity Using JavaScript?

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);
Nach dem Login kopieren

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"});
})();
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage