web-dev-qa-db-fra.com

Exécuter du code JavaScript à la fermeture de la fenêtre ou à l'actualisation de la page?

Existe-t-il un moyen d'exécuter un code JavaScript final lorsqu'un utilisateur ferme une fenêtre de navigateur ou actualise la page?

Je pense à quelque chose de similaire à onload mais plutôt à onclose? Merci.

Je n'aime pas la méthode onbeforeunload, qui donne toujours lieu à une boîte de confirmation (quitter la page/rester sur Mozilla) ou (recharger/ne pas recharger sur Chrome). Existe-t-il un moyen d'exécuter le code en silence?

javascriptbrowser
92
Peter

Ok, j’ai trouvé une solution qui fonctionne pour cela: elle consiste à utiliser l’événement beforeunload puis à faire en sorte que le gestionnaire renvoie null. Ceci exécute le code souhaité sans afficher de boîte de confirmation. Ca fait plutot comme ca:

window.onbeforeunload = closingCode;
function closingCode(){
   // do something...
   return null;
}

J'espère que cela t'aides.

42
Peter

Il existe à la fois window.onbeforeunload et window.onunload, qui sont utilisés différemment selon le navigateur. Vous pouvez les associer en définissant les propriétés de la fenêtre sur des fonctions ou en utilisant le .addEventListener:

window.onbeforeunload = function(){
   // Do something
}
// OR
window.addEventListener("beforeunload", function(e){
   // Do something
}, false);

Habituellement, onbeforeunload est utilisé si vous devez empêcher l'utilisateur de quitter la page (par exemple, l'utilisateur travaille sur des données non sauvegardées, il doit donc les sauvegarder avant de quitter). onunload n'est pas supporté par Opera, autant que je sache, mais vous pouvez toujours définir les deux.

68
JCOC611

version jQuery:

$(window).unload(function(){
    // Do Something
});

Mise à jour: jQuery 3:

$(window).on("unload", function(e) {
    // Do Something
});

Merci Garrett

14
Paras

Parfois, vous voudrez peut-être informer le serveur que l'utilisateur quitte la page. Ceci est utile, par exemple, pour nettoyer les images non sauvegardées stockées temporairement sur le serveur, pour marquer cet utilisateur comme "hors ligne" ou pour se connecter une fois leur session terminée.

Historiquement, vous enverriez une demande AJAX dans la fonction beforeunload, ce qui pose toutefois deux problèmes. Si vous envoyez une demande asynchrone, rien ne garantit que la demande sera exécutée correctement. Si vous envoyez une demande synchrone, celle-ci est plus fiable, mais le navigateur se bloque jusqu'à la fin de la demande. S'il s'agit d'une requête lente, cela constituerait un inconvénient majeur pour l'utilisateur.

Heureusement, nous avons maintenant navigator.sendBeacon() . En utilisant la méthode sendBeacon(), les données sont transmises de manière asynchrone au serveur Web lorsque l'agent utilisateur a l'occasion de le faire, sans retarder le déchargement ni affecter les performances de la navigation suivante. Cela résout tous les problèmes de soumission des données d'analyse: les données sont envoyées de manière fiable, elles sont envoyées de manière asynchrone et cela n'a aucune incidence sur le chargement de la page suivante. Voici un exemple de son utilisation:

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log.php", analyticsData);
}

sendBeacon() est supporté dans:

  • Edge 14
  • Firefox 31
  • Chrome 39
  • Safari 11.1
  • Opéra 26
  • iOS Safari 11.4

Il n'est PAS actuellement pris en charge dans:

  • Internet Explorer
  • Opera Mini

Voici un polyfill pour sendBeacon () au cas où vous auriez besoin d'ajouter un support pour les navigateurs non pris en charge. Si la méthode n'est pas disponible dans le navigateur, il enverra une demande synchrone AJAX.

10
Mike

La documentation ici encourage à écouter l'événement onbeforeunload et/ou à ajouter un écouteur d'événements sur window.

window.addEventListener('beforeunload', function(event) {
  //do something here
}, false);

Vous pouvez également simplement renseigner les propriétés .onunload ou .onbeforeunload de la fenêtre avec une fonction ou une référence de fonction.

Bien que le comportement ne soit pas normalisé sur tous les navigateurs, la fonction peut renvoyer une valeur que le navigateur affichera lors de la confirmation de quitter ou non la page.

6
davejoem

Vous pouvez utiliser window.onbeforeunload.

window.onbeforeunload = confirmExit;
function confirmExit(){
    alert("confirm exit is being called");
    return false;
}
5
Gurpreet Singh

L'événement s'appelle beforeunload, vous pouvez donc affecter une fonction à window.onbeforeunload.

3
Phssthpok