Comment faire la distinction entre la fermeture d'un onglet de navigateur et la fermeture du navigateur entier à l'aide de JavaScript?

JavaScript distingue la fermeture de l'onglet du navigateur et la fermeture complète du navigateur

Dans l'utilisation quotidienne de la navigation multi-gabarits, les utilisateurs peuvent avoir besoin de fermer un seul onglet ou l'ensemble du navigateur. Dans certains scénarios d'application, par exemple, une action spécifique est requise lorsque le navigateur est complètement fermé (tel que la compensation des informations de connexion), mais pas lors de la fermeture d'un seul onglet. Cet article explorera comment utiliser JavaScript pour distinguer ces deux situations et fournir des solutions correspondantes.

Description du problème

Supposons que l'application Web que nous avons développée s'exécute sur le navigateur Chrome sur le système Windows. L'exigence consiste à effacer les informations de connexion lorsque l'utilisateur ferme tout le navigateur, tout en gardant les informations de connexion inchangées lors de la fermeture d'un seul onglet. Comment implémenter cette fonction?

Solution

Nous pouvons utiliser l'objet sessionStorage de HTML5 pour résoudre ce problème. sessionStorage permet de stocker les données de paire de valeurs de clé dans la même session. Lors de la fermeture du navigateur, les données de sessionStorage seront effacées, tandis que la fermeture d'un seul onglet n'affectera pas les données sessionStorage des autres onglets.

Les étapes de mise en œuvre spécifiques sont les suivantes:

1. Écoutez l'événement de fermeture du navigateur: utilisez l'événement beforeunload pour écouter le fonctionnement de fermeture ou de fermeture du navigateur.

    window.addeventListener ('avant en charge', fonction (e) {
        // Ajouter du code pour effacer les informations de connexion ici, mais il convient de noter que l'exécution directement ici peut également conduire à une compensation lors de la fermeture de l'onglet.
    });

2. Utilisez SessionStorage pour distinguer le comportement de clôture: lorsque chaque onglet est chargé, définissez un élément sessionStorage et vérifiez si l'élément existe lorsqu'il est fermé. S'il existe, cela signifie que la page d'onglet est fermée; S'il n'existe pas, cela signifie que le navigateur entier est fermé.

    // Définir ses sessionStorage lorsque la page se charge
    window.addeventListener ('Load', function () {
        SessionStorage.SetItem ('Tabopen', 'True');
    });
   
    // Vérifiez SessionStorage lorsqu'il est fermé
    window.addeventListener ('avant en charge', fonction (e) {
        if (! SessionStorage.getItem ('Tabopen')) {
            // Effacer les informations de connexion clearLoginInfo ();
        } autre {
            // Supprimer l'élément SessionStorage SessionStorage.RemoveItem ('tabopen');
        }
    });
   
    fonction clearlogininfo () {
        // Ajouter le code pour effacer les informations de connexion ici à Console.log («Effacer des informations de connexion ...»);
    }

Grâce à la méthode ci-dessus, nous pouvons distinguer efficacement entre la fermeture de la page d'onglet et la fermeture du navigateur, et effectuer le fonctionnement de l'effacement des informations de connexion lorsque le navigateur est complètement fermé, tandis que cette opération ne sera pas effectuée lors de la fermeture d'une seule page d'onglet. Il convient de noter que l'événement beforeunload peut être intercepté ou retardé par le navigateur, en fonction de l'implémentation spécifique du navigateur et des paramètres utilisateur. Pour améliorer la fiabilité, d'autres technologies, telles que la gestion de session côté serveur, peuvent être prises en compte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!