Comment puis-je capturer de manière fiable les événements de fermeture de fenêtre en JavaScript et exécuter des actions ?

Capturer un événement de fermeture de fenêtre et exécuter des actions en JavaScript

Déterminer le moment où un utilisateur quitte une page spécifiée, en particulier lors de la fermeture d'une fenêtre, peut être difficile . Voici comment capturer cet événement et effectuer des actions :

Navigateurs modernes (2024 et au-delà)

L'API Beacon fournit une solution pour capturer les événements de fermeture de fenêtre. Les demandes de balises sont conçues pour être exécutées même lorsque l'utilisateur quitte la page, garantissant une collecte de données fiable :

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

navigator.sendBeacon(url, data);

Surveillance des événements

Si la demande doit être lancée à au dernier moment, surveillez l'événement de changement de visibilité. Cet événement se déclenche lorsque la visibilité de la page passe d'active à masquée, indiquant que l'utilisateur a peut-être quitté la page :

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

Prise en charge des anciens navigateurs

Pour une compatibilité ascendante , pensez à utiliser la bibliothèque lifecycle.js pour gérer les événements du cycle de vie des pages :

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

Remarque : Les bloqueurs de publicités peuvent interférer avec les requêtes sendBeacon. Pensez à utiliser des requêtes de même origine ou à éviter les URL de suivi génériques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!