Bagaimanakah Saya Boleh Merakam Acara Tutup Tetingkap dalam JavaScript dan Melaksanakan Tindakan dengan Aman?

Merakam Acara Tutup Tetingkap dan Melaksanakan Tindakan dalam JavaScript

Menentukan apabila pengguna meninggalkan halaman tertentu, terutamanya melalui penutupan tetingkap, boleh menjadi mencabar . Begini cara untuk menangkap acara ini dan melakukan tindakan:

Pelayar Moden (2024 dan seterusnya)

API Beacon menyediakan penyelesaian untuk menangkap peristiwa penutupan tetingkap. Permintaan Beacon direka bentuk untuk dilengkapkan walaupun apabila pengguna keluar dari halaman, memastikan pengumpulan data yang boleh dipercayai:

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

navigator.sendBeacon(url, data);

Pemantauan Acara

Jika permintaan perlu dimulakan di saat terakhir, pantau acara perubahan keterlihatan. Peristiwa ini tercetus apabila keterlihatan halaman berubah daripada aktif kepada tersembunyi, menunjukkan bahawa pengguna mungkin telah meninggalkan halaman:

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

Sokongan Penyemak Imbas Lama

Untuk keserasian ke belakang , pertimbangkan untuk menggunakan perpustakaan lifecycle.js untuk mengurus kitaran hayat halaman acara:

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);
  }
});

Nota: Penyekat iklan mungkin mengganggu permintaan sendBeacon. Pertimbangkan untuk menggunakan permintaan asal yang sama atau elakkan URL penjejakan generik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Merakam Acara Tutup Tetingkap dalam JavaScript dan Melaksanakan Tindakan dengan Aman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!