Comment repérer la fermeture du navigateur avec JavaScript ?

Bienvenue dans ce guide, où nous vous expliquerons comment détecter la fermeture du navigateur en utilisant JavaScript.

Contexte

Les fermetures sont polyvalentes, encapsulant données et comportements, idéales pour la gestion de données privées, d’événements, fonctions de rappel, etc. Elles offrent une flexibilité et un contrôle accrus dans le développement JavaScript, permettant de gérer des variables externes de manière sécurisée et efficace.

Dans le développement de sites interactifs, il est souvent nécessaire de détecter rapidement la fermeture du navigateur par l’utilisateur. L’événement onUnload ne différencie pas les fermetures liées à la navigation, la mise à jour ou le changement d’URL. Heuresement, il existe plusieurs méthodes pour aborder cette problématique et obtenir plus d’informations sur la fermeture du navigateur, ainsi que sur les raisons de cette fermeture.

Qu’est ce qu’une fermeture en Javascript ?

Les fermetures en JavaScript sont des fonctions qui conservent des références aux variables de leur environnement externe. En maintenant la portée externe dans leur portée interne, les fermetures deviennent puissantes pour gérer des variables externes.

Les fermetures en JavaScript sont puissantes, car elles permettent aux fonctions d’accéder aux variables de leur environnement externe, même après la fin de son exécution, en maintenant la portée externe dans leur propre portée interne. Cette caractéristique les rend extrêmement utiles dans de nombreuses situations.

Exemple

Supposons que nous ayons une fonction externe nommée “outerFunction” qui définit une variable “x” et une fonction interne “innerFunction”. La fonction “innerFunction” peut accéder à la variable “x” de la fonction “outerFunction”, même si “outerFunction” a déjà été exécutée.

function outerFunction() {
var x = 10; // Variable locale à outerFunction

function innerFunction() {
console.log(x); // innerFunction accède à la variable x de outerFunction
}

return innerFunction; // outerFunction renvoie innerFunction
}

var closure = outerFunction(); // Closure détient maintenant une référence à innerFunction
closure(); // Cela affichera 10, même si outerFunction a terminé son exécution

Une fermeture en JavaScript permet à une fonction interne d’accéder aux variables de la fonction externe, même après la fin de l’exécution de cette dernière. Dans cet exemple, la variable closure détient une référence à `inner

Comment détecter la fermeture du navigateur en JavaScript ?

Pour détecter la fermeture du navigateur en JavaScript, il est essentiel de comprendre que l’événement “onUnload” n’est pas suffisant pour faire la distinction entre une fermeture due à différentes raisons. Cela est dû à sa nature limitée et à son incapacité à fournir des informations spécifiques sur la manière dont la page est fermée.

Cependant, il existe plusieurs méthodes pour aborder cette problématique et obtenir plus d’informations sur la fermeture du navigateur, ainsi que sur les raisons de cette fermeture. Voici quelques-unes de ces méthodes possibles :

Utilisation de l’événement “beforeUnload” pour détecter la fermeture du navigateur

L’événement “beforeUnload” permet de détecter la fermeture du navigateur avant qu’elle ne se produise. Vous pouvez utiliser cet événement pour afficher un message de confirmation à l’utilisateur ou effectuer des actions spécifiques avant la fermeture. Toutefois, il ne fournit pas d’informations détaillées sur la cause de la fermeture.

window.addEventListener("beforeunload", function (e) {
  // Actions à effectuer avant la fermeture
  // Vous pouvez afficher un message de confirmation ici
});

Reconnaître la fermeture du navigateur

l’utilisation de l’événement onUnload ne permet pas de faire la distinction entre une fermeture due à une navigation normale, une mise à jour de la page ou un changement d’URL.

Pour surmonter cette limitation, voici un script simple qui reconnaît la fermeture du navigateur et permet d’effectuer des actions spécifiques. Commençons par examiner ce qui doit être inclus sur la page à surveiller :

<body onUnload="window.open('chkclose.htm','chk');">

Exemple

window.addEventListener(“beforeunload”, function (e) {
// Actions spécifiques avant la fermeture
// Par exemple, afficher un message de confirmation
var confirmationMessage = “Êtes-vous sûr de vouloir quitter la page ?”;
(e || window.event).returnValue = confirmationMessage;

// Ouvrir la page chkclose.htm dans une nouvelle fenêtre
window.open(‘chkclose.htm’, ‘chk’);
return confirmationMessage;
});

L’utilisation de window.open(‘chkclose.htm’, ‘chk’); dans le code permet d’ouvrir une nouvelle fenêtre de navigateur avec le contenu de chkclose.htm. Cela se produit avant la fermeture de la page actuelle. Cette technique peut être utilisée pour effectuer des actions spécifiques en cas de fermeture de la page, comme afficher un message de confirmation à l’utilisateur. L’utilisation de chkclose.htm permet de personnaliser le contenu de la nouvelle fenêtre ouvert en cas de fermeture. Vous pouvez y inclure des informations de déconnexion, des instructions ou tout autre contenu pertinent pour l’utilisateur avant de quitter la page.

Suivi des actions de l’utilisateur :

Une autre approche consiste à suivre les actions de l’utilisateur, telles que la pression de la touche “F5” pour rafraîchir la page ou les clics sur des liens sortants. Vous pouvez ajouter des gestionnaires d’événements pour ces actions et agir en conséquence.

document.addEventListener("keydown", function (e) {
  if (e.key === "F5") {
    // L'utilisateur a appuyé sur la touche F5 (actualisation)
    // Réagir en conséquence
  }
});

// Vous pouvez également ajouter des gestionnaires d'événements pour les liens sortants

Utilisation d’une page de déconnexion :

Créez une page de déconnexion dédiée qui permet à l’utilisateur de se déconnecter de manière contrôlée avant de quitter la page. Vous pouvez rediriger l’utilisateur vers cette page lorsqu’il souhaite se déconnecter ou fermer la fenêtre.

<!DOCTYPE html>
<html>
<head>
    <title>Déconnexion</title>
</head>
<body>
    <h1>Déconnexion</h1>
    <p>Êtes-vous sûr de vouloir vous déconnecter ?</p>
    <button id="deconnexionBtn">Déconnexion</button>
</body>
</html>

Dans le fichier JavaScript associé à votre site (par exemple, “script.js”), vous pouvez ajouter le code suivant pour gérer la déconnexion :

// Assurez-vous d'inclure ce fichier JavaScript sur vos pages où vous avez besoin de gérer la déconnexion.

// Sélectionnez le bouton de déconnexion par son ID
const deconnexionBtn = document.getElementById("deconnexionBtn");

// Ajoutez un gestionnaire d'événements pour le clic sur le bouton de déconnexion
deconnexionBtn.addEventListener("click", function () {
    // Effectuez les actions de déconnexion ici, par exemple :
    // 1. Mettre à jour les informations de session côté serveur.
    // 2. Rediriger l'utilisateur vers une page de confirmation ou de déconnexion réussie.
    window.location.href = "confirmation_deconnexion.html"; // Remplacez "confirmation_deconnexion.html" par la page de confirmation souhaitée.
});

Communication avec le serveur :

Établissez une communication avec le serveur pour signaler la fermeture de la page. Vous pouvez envoyer une requête au serveur pour enregistrer la fermeture ou effectuer des actions spécifiques. Cette méthode peut être plus précise pour recueillir des informations sur la fermeture.