javascript - Meilleure façon de détecter quand un utilisateur quitte une page web ?

Quelle est la meilleure façon de détecter si un utilisateur quitte une page web ?

L'événement JavaScript onunload ne fonctionne pas à chaque fois (la requête HTTP prend plus de temps que celui requis pour fermer le navigateur).

La création d'un en sera probablement bloquée par les navigateurs actuels.

Réponse #1

Essayez l'événement onbeforeunload : il est déclenché juste avant que la page ne soit déchargée. Il vous permet également de demander si l'utilisateur veut vraiment quitter. Voir la démo onbeforeunload Demo.

Alternativement, vous pouvez envoyer une requête Ajax lorsqu'il part.

Réponse #2

Mozilla Developer Network a une belle description et un exemple de onbeforeunload.

Si vous voulez avertir l'utilisateur avant de quitter la page si votre page est modifiée (c'est-à-dire si l'utilisateur a saisi des données) :

window.addEventListener('beforeunload', function(e) {
  var myPageIsDirty = ...; //you implement this logic...
  if(myPageIsDirty) {
    //following two lines will cause the browser to ask the user if they
    //want to leave. The text of this dialog is controlled by the browser.
    e.preventDefault(); //per the standard
    e.returnValue = ''; //required for Chrome
  }
  //else: user is allowed to leave without a warning dialog
});

Réponse #3

Voici une solution alternative - puisque dans la plupart des navigateurs les contrôles de navigation (la barre de navigation, les onglets, etc.) se trouvent au-dessus de la zone de contenu de la page, vous pouvez détecter le déplacement du pointeur de la souris quittant la page par le haut et afficher une boîte de dialogue « avant de partir ». C'est complètement discret et cela vous permet d'interagir avec l'utilisateur avant qu'il n'effectue réellement l'action de quitter.

$(document).bind("mouseleave", function(e) {
    if (e.pageY - $(window).scrollTop() <= 1) {    
        $('#BeforeYouLeaveDiv').show();
    }
});

L'inconvénient est que, bien sûr, c'est une supposition que l'utilisateur a réellement l'intention de partir, mais dans la grande majorité des cas, c'est correct.

Réponse #4

Dans le cas où vous devez exécuter du code asynchrone (comme envoyer un message au serveur indiquant que l'utilisateur n'est pas concentré sur votre page pour le moment), l'événement beforeunload ne donnera pas le temps au code asynchrone de s'exécuter. Dans le cas de l'asynchrone, j'ai constaté que les événements visibilitychange et mouseleave sont les meilleures options. Ces événements se déclenchent lorsque l'utilisateur change d'onglet, ou cache le navigateur, ou sort le curseur de la fenêtre.

document.addEventListener('mouseleave', e=>{
     //do some async code
})

document.addEventListener('visibilitychange', e=>{
     if (document.visibilityState === 'visible') {
   //report that user is in focus
    } else {
     //report that user is out of focus
    }  
})