Comment détecter la fermeture du navigateur en JavaScript

Ils vous arrivent aussi d’être dans une page où vous étiez par exemple entraine d’éditer ou d’écrire quelque chose et lorsque vous essayez de fermer la fenêtre ou l’onglet, voir ce message :

Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées

Découvrons dans la suite comment cela marche et diverse utilisation que pourraient avoir la détection de la fermeture du navigateur ou de l’onglet.

L’événement beforeunload

En JavaScript, L’objet window dispose d’un événement qui est déclenché quand la fenêtre, l’onglet, le document et ses ressources sont sur le point d’être déchargés.

Voir aussi  PHPStorm un environnement de développement intégré WEB pour le pro

Vous avez testé ce code et vous avez remarqué que ça n’empêche pas la fermeture de l’onglet, c’est tout à fait normal comme dit dans MDN, pour empêcher la fermeture de l’onglet, il faut que la valeur de la propriété returnValue de l’objet event passé en paramètre de la fonction de retour (callback) de l’événement soit une chaine de caractère.

Voir aussi  Pace.js Ajouter une barre de progression de chargement dans votre site

Et là l’utilisateur en fermant l’onglet ou la fenêtre voit ça :
detecte close of browser

Le cas d’utilisation

Récemment, dans un projet qu’on travaillait, il y avait un module de discussion instantanée où la liste de personnes connectées devrait être instantanées dans la mesure où les personnes se connectaient ou déconnectaient.

Bien qu’on arrivait à déconnecter automatiquement l’utilisateur sur base de sa dernière connexion par rapport au temps actuel (quand le temps actuel moins le temps de la dernière connexion est supérieur à 3, ce qu’il est déconnecté), D’après la logique de notre algorithme, on devrait exécuter une requête Ajax quand quelqu’un ferme son navigateur ou l’onglet. C’est cette requête qui déconnecte manuellement l’utilisateur. Grâce à cet évènement, on a su greffer notre requête Ajax lors de la fermeture de l’onglet sans que l’utilisateur ne s’en aperçoive.

Ajouter un commentaire

Plus dans Javascript
phpstorm
PHPStorm un environnement de développement intégré WEB pour le pro

Jetbrains PHPStorm est un environnement de développement intégré spécialisé pour le développement Web. Initialement conçu pour le développement PHP avec...

wow.js
WOW.js et Animate.css fait du WOOW

La librairie CSS d’animation animate.css est une excellente solution quant aux animations courantes. Tout un tas d’animations prédéfinies existent mais...

Fermer