Heim >Web-Frontend >js-Tutorial >Wie kann ich zuverlässig erkennen, wenn ein Benutzer einen Browser-Tab schließt oder meine Webseite verlässt?

Wie kann ich zuverlässig erkennen, wenn ein Benutzer einen Browser-Tab schließt oder meine Webseite verlässt?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-07 21:32:14986Durchsuche

How Can I Reliably Detect When a User Closes a Browser Tab or Navigates Away from My Web Page?

Fensterschließereignisse in JavaScript erfassen

Das Erkennen von Seitenabbrüchen durch Benutzer ist in der Webanalyse von entscheidender Bedeutung. In diesem Artikel werden Techniken untersucht, um zu erkennen, wann ein Benutzer einen Browser-Tab schließt oder eine bestimmte Seite verlässt.

Window.close-Ereignis

Früher das window.close-Ereignis stellte eine zuverlässige Methode zur Verfolgung von Fensterschließungen bereit. Änderungen in der Seitenlebenszyklusverwaltung machen dieses Ereignis jedoch weniger zuverlässig.

Sichtbarkeitsänderungsereignis

Für moderne Browser bietet das Sichtbarkeitsänderungsereignis eine genauere Darstellung, wann ein Benutzer die Seite verlässt eine Seite. Dieses Ereignis wird ausgelöst, wenn der Sichtbarkeitsstatus der Seite von sichtbar zu ausgeblendet wechselt.

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Perform actions on page exit
  }
});

Beacon-API

Für eine umfassende browserübergreifende Unterstützung sollten Sie die Verwendung der Beacon-API in Betracht ziehen. Beacon-Anfragen sind so konzipiert, dass sie auch dann abgeschlossen werden, wenn ein Benutzer die Seite verlässt, um die Datenerfassung von Sitzungen und Analysen sicherzustellen.

var url = "https://example.com/foo";
var data = "bar";

navigator.sendBeacon(url, data);

Lifecycle.js-Bibliothek

Für Kompatibilität mit Für ältere Browser bietet die Bibliothek lifecycle.js zusätzliche Unterstützung. Es implementiert Best Practices für den Seitenlebenszyklus und gewährleistet so eine zuverlässige Ereignisbehandlung.

lifecycle.addEventListener('statechange', function(event) {
  if (event.originalEvent === 'visibilitychange' && event.newState === 'hidden') {
    navigator.sendBeacon(url, data);
  }
});

Überlegungen

  • Adblocker: Einige Adblocker können dies tun sendBeacon-Anfragen an bestimmte Domains blockieren.
  • Cross-Site Anfragen:Beacon-Anfragen unterliegen CORS-Einschränkungen.

Das obige ist der detaillierte Inhalt vonWie kann ich zuverlässig erkennen, wenn ein Benutzer einen Browser-Tab schließt oder meine Webseite verlässt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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