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.

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  PHPStorm un environnement de développement intégré WEB pour le pro

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.

Si vous avez aimé ce post, acclamez-moi juste en dessous

Voir aussi  WOW.js et Animate.css fait du WOOW

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.