Comment détecter le clic sur le bouton Retour de l'utilisateur dans les navigateurs sans interférence de rechargement du navigateur ?

Détecter le clic sur le bouton Précédent de l'utilisateur dans les navigateurs

Lorsqu'ils tentent de détecter les clics sur le bouton Précédent, les développeurs s'appuient souvent sur l'écouteur d'événement window.onbeforeunload. Cependant, cet événement se déclenche non seulement pour les clics sur le bouton Précédent, mais également pour les rechargements du navigateur, ce qui peut être trompeur.

Détection des clics sur le bouton Précédent sans interférence de rechargement du navigateur

Pour gérer clics sur le bouton retour sans faux positifs, pensez à utiliser une approche sur mesure :

1. Modification de l'historique :

   • Lors du chargement de la page, vérifiez si le L'API history.pushState est disponible.
   • Si elle est prise en charge, transférez un état aléatoire sur l'historique à l'aide de history.pushState.
   • Définissez un écouteur d'événement onpopstate pour gérer les transitions des boutons avant et arrière.

2. Approche basée sur le hachage :

   • Si history.pushState n'est pas pris en charge, utilisez l'événement de changement de hachage (window.onhashchange) .
   • Définissez une valeur de hachage initiale et, lors des modifications de hachage, recherchez une valeur de hachage non aléatoire.
   • Utilisez un indicateur pour vous assurer que seules les modifications de hachage initiées par l'utilisateur déclenchent la logique du bouton de retour, ignorant les rechargements du navigateur.

Mise en œuvre

<code class="javascript">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back button click here
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Handle back button click here
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

Compatibilité

Cette approche il a été signalé qu'il fonctionnait efficacement dans Chrome et Firefox.

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!