Maison > interface Web > js tutoriel > Comment faire la distinction entre une actualisation du navigateur et une fermeture de fenêtre ?

Comment faire la distinction entre une actualisation du navigateur et une fermeture de fenêtre ?

Patricia Arquette
Libérer: 2024-11-04 04:54:02
original
767 Les gens l'ont consulté

How to Distinguish Between a Browser Refresh and a Window Close?

Distinction entre les actions d'actualisation et de fermeture du navigateur

Déterminer la distinction entre l'actualisation d'une page et la fermeture d'un navigateur peut sembler difficile, car les deux actions déclenchent l'événement ONUNLOAD. Cependant, il existe une solution à cette énigme.

Solution :

Cette approche exploite le stockage local HTML5 et la communication serveur-client :

  1. Gestionnaire ONUNLOAD : Sur la page, ajoutez un gestionnaire de déchargement à la fenêtre en utilisant du pseudo-JavaScript :

    <code class="javascript">function myUnload(event) {
        if (window.localStorage) {
            window.localStorage['myUnloadEventFlag'] = new Date().getTime();
        }
        askServerToDisconnectUserInAFewSeconds(); // Synchronous AJAX call
    }</code>
    Copier après la connexion

    Cette fonction :

    • Marque la page comme étant en cours de déchargement dans le stockage local.
    • Informe de manière asynchrone le serveur de déconnecter l'utilisateur dans quelques secondes.
  2. Gestionnaire ONLOAD : Sur le corps, ajoutez un gestionnaire de chargement :

    <code class="javascript">function myLoad(event) {
        if (window.localStorage) {
            var t0 = Number(window.localStorage['myUnloadEventFlag']);
            if (isNaN(t0)) t0 = 0;
            var t1 = new Date().getTime();
            var duration = t1 - t0;
            if (duration < 10 * 1000) {
                // Browser reload
                askServerToCancelDisconnectionRequest(); // Asynchronous AJAX call
            } else {
                // Tab/window close
                // Perform desired actions (e.g., do nothing)
            }
        }
    }</code>
    Copier après la connexion

    Cette fonction :

    • Vérifie le décalage horaire depuis l'événement de déchargement précédent.
    • Si moins de 10 secondes se sont écoulées, c'est un rechargement du navigateur.
    • Si plus de 10 secondes se sont écoulées, c'est une fermeture d'onglet/fenêtre.
  3. Interaction avec le serveur : Sur le serveur, maintenez une liste des demandes de déconnexion et utilisez un thread de minuterie pour inspecter la liste. Traitez les demandes de déconnexion après un délai d'attente (par exemple 5 secondes) et gérez les annulations si elles sont reçues.

Cette solution permet de différencier les fermetures d'onglets/fenêtres, les actions de rechargement, les liens suivis et les formulaires soumis. Il est applicable dans les navigateurs prenant en charge le stockage local HTML5. Notez cependant qu'il repose sur l'événement unload et peut ne pas être compatible avec les anciens navigateurs comme MSIE7.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal