Wie kann ich Fensterschließereignisse in JavaScript zuverlässig erfassen und Aktionen ausführen?

Fensterschließereignisse erfassen und Aktionen in JavaScript ausführen

Bestimmen, wann ein Benutzer eine bestimmte Seite verlässt, insbesondere durch das Schließen eines Fensters, kann eine Herausforderung sein . So erfassen Sie dieses Ereignis und führen Aktionen aus:

Moderne Browser (2024 und höher)

Die Beacon-API bietet eine Lösung zum Erfassen von Fensterschließereignissen. Beacon-Anfragen sind so konzipiert, dass sie auch dann abgeschlossen werden, wenn der Benutzer die Seite verlässt, um eine zuverlässige Datenerfassung zu gewährleisten:

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

navigator.sendBeacon(url, data);

Ereignisüberwachung

Wenn die Anfrage initiiert werden muss Überwachen Sie im letzten Moment das VisibilityChange-Ereignis. Dieses Ereignis wird ausgelöst, wenn sich die Sichtbarkeit der Seite von aktiv in ausgeblendet ändert, was darauf hinweist, dass der Benutzer die Seite möglicherweise verlassen hat:

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Send beacon request
  }
});

Unterstützung für ältere Browser

Für Abwärtskompatibilität Erwägen Sie die Verwendung der lifecycle.js-Bibliothek zum Verwalten von Seitenlebenszyklusereignissen:

lifecycle.addEventListener('statechange', function(event) {
  if (event.originalEvent == 'visibilitychange' && event.newState == 'hidden') {
    var url = "https://example.com/foo";
    var data = "bar";

    navigator.sendBeacon(url, data);
  }
});

Hinweis: Adblocker kann sendBeacon-Anfragen beeinträchtigen. Erwägen Sie die Verwendung von Anfragen mit demselben Ursprung oder die Vermeidung allgemeiner Tracking-URLs.

Das obige ist der detaillierte Inhalt vonWie kann ich Fensterschließereignisse in JavaScript zuverlässig erfassen und Aktionen ausführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!