Comment puis-je envoyer de manière fiable des requêtes AJAX et exécuter des scripts avant qu'un utilisateur ne ferme une fenêtre de navigateur ?

Gérer la fermeture de la fenêtre pour les requêtes et les scripts AJAX en JavaScript

Défi

Les utilisateurs peuvent quitter une page Web de différentes manières, notamment en fermant la fenêtre ou en naviguant loin via une autre URL. Déterminer le moment où un utilisateur quitte la page et déclencher les actions correspondantes peut être un défi.

Solution

Mise à jour 2024 :

• API Beacon : L'API Beacon offre une solution fiable dans les navigateurs modernes, garantissant que les requêtes sont terminées même lorsque les utilisateurs quittent le page.
• Événement de changement de visibilité : Cet événement capture le dernier changement d'état observable dans la plupart des navigateurs, y compris les transitions de l'état passif à l'état caché.

Mise en œuvre

Changement de visibilité Événement :

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Trigger AJAX request or run script
  }
});

API Beacon :

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

navigator.sendBeacon(url, data);

Détails

L'API Beacon est conçue pour répondre aux requêtes même lorsque les utilisateurs quitter la page. Il est recommandé d'utiliser l'événement visiblechange pour détecter le moment où l'utilisateur a quitté la page et déclencher la requête Beacon à ce stade.

Bibliothèque Lifecycle.js (pour les navigateurs plus anciens) :

Pour la compatibilité avec les anciens navigateurs, pensez à utiliser la bibliothèque lifecycle.js pour gérer la page cycle de vie.

Considérations

• Bloqueurs de publicité : Les bloqueurs de publicité peuvent bloquer les requêtes Beacon vers certains domaines de suivi.
• Demandes intersites : Les demandes de balises suivent les restrictions CORS et incluent des cookies, assurez-vous donc d'une configuration appropriée pour l'origine croisée demandes.

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!