Comment faire la distinction entre l'actualisation de la page et la fermeture du navigateur dans l'événement onUnload ?

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

Lorsqu'il est déclenché par une actualisation de page ou par la fermeture d'un navigateur, l'événement ONUNLOAD présente un défi pour différencier les deux actions. .

Pour résoudre ce problème, la solution suivante utilise le stockage local HTML5 et le client/serveur AJAX. communication :

Implémentation de la solution

Page sur le gestionnaire d'événements 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) {
            // It's a browser reload
        } else {
            // It's a browser close
        }
    }
}</code>

Page sur le gestionnaire d'événements de déchargement

<code class="javascript">function myUnload(event) {
    if (window.localStorage) {
        // Flag the page as unloading
        window.localStorage['myUnloadEventFlag']=new Date().getTime();
    }

    // Notify the server to disconnect the user in a few seconds
    askServerToDisconnectUserInAFewSeconds();
}</code>

Implémentation du serveur

• Collectez les demandes de déconnexion dans une liste.
• Définissez un fil de discussion de minuterie sur inspectez régulièrement la liste et déconnectez les utilisateurs après un délai d'attente (5 secondes).
• Supprimez les demandes de déconnexion de la liste dès réception des demandes d'annulation du client.

Points clés

• En utilisant l'événement unload au lieu de beforeUnload, les pièces jointes peuvent être traitées correctement.
• Cette solution est limitée aux navigateurs prenant en charge Stockage local HTML5.
• Les approches alternatives basées sur la position event.clientY ou X sont moins fiables.

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!