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.

window.onbeforeunload = function(event){

                //Le code dans cette section sera exécuté avant que la fenêtre ou l’onglet soit fermé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.

window.onbeforeunload = function(event){

                event.returnValue = ‘chaine de caractère’ ;

                //Ou on peut aussi prévenir le comportement par défaut

                event.preventDefault() ;

}
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.

Catégorisé:

Étiqueté dans :