Comment détecter avec précision les clics sur le bouton Retour dans les navigateurs ?

Détection des clics sur le bouton Retour dans le navigateur avec une précision améliorée

Introduction :

L'identification des clics sur le bouton Retour est essentielle pour la mise en œuvre du navigateur suivi de l'historique de navigation. Bien qu'il existe diverses approches, il est crucial de faire la distinction entre les véritables clics sur le bouton de retour et les autres actions du navigateur qui déclenchent des événements similaires.

Contexte :

Une approche courante consiste à utiliser la fenêtre. Écouteur d'événements .onbeforeunload, qui se déclenche lorsqu'un utilisateur tente de fermer ou de quitter une page. Cependant, cet événement se déclenche également lors d'actions telles que l'appui sur F5 ou le rechargement de la page, conduisant à des faux positifs.

Solution :

Pour résoudre ce problème, un système plus sophistiqué une solution est nécessaire. Cette solution exploite les méthodes history.pushState et window.onpopstate, qui offrent un contrôle plus fin sur l'historique de navigation.

Implémentation :

L'extrait de code suivant illustre l'implémentation :

<code class="js">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    } else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older Firefox and Internet Explorer 9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            } else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

Explication :

Ce code utilise history.pushState pour mettre à jour l'historique du navigateur sans recharger la page. Il se lie ensuite à l'événement window.onpopstate, qui se déclenche lorsqu'un utilisateur clique sur le bouton Précédent ou Suivant.

Dans les navigateurs prenant en charge history.pushState, cette approche permet une détection précise des clics sur le bouton Précédent, à l'exclusion des événements de rechargement. Pour les navigateurs plus anciens, le code utilise une méthode de secours basée sur les modifications de hachage, ce qui introduit une légère limitation dans la gestion des délimiteurs de signe dièse.

Conclusion :

Cette approche améliorée garantit détection précise des clics sur le bouton de retour dans les navigateurs, éliminant les limitations liées à l'utilisation de window.onbeforeunload seul. Il fournit aux développeurs une solution fiable pour suivre l'historique de navigation et améliorer l'expérience utilisateur.

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!