Comment détecter les événements du bouton Précédent du navigateur – multi-navigateur

Question

Comment détecter explicitement si l'utilisateur a appuyé sur le bouton Précédent du navigateur ?

Comment puis-je utiliser le système #URL pour forcer l'utilisation d'un bouton de retour sur la page dans une application Web d'une seule page ?

Pourquoi le bouton Précédent du navigateur ne déclenche-t-il pas son propre événement ? ?

Answer 1

Vous pouvez essayer popstate gestionnaires d'événements comme :

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);

^{Remarque : pour de meilleurs résultats, vous ne devez charger ce code que sur la page spécifique où vous souhaitez implémenter la logique pour éviter tout autre problème inattendu.}

L'événement popstate est déclenché à chaque fois que l'entrée actuelle de l'historique change (l'utilisateur accède à un nouvel état). Cela se produit lorsque l'utilisateur clique sur les boutons Précédent/Suivant du navigateur ou lorsque la méthode history.back()、history.forward()、history.go() > est appelée par programme.

event.state est un attribut de l'événement, égal à l'objet d'état historique.

Pour la syntaxe jQuery, enveloppez-le (ajoutez un écouteur pair une fois le document prêt) :

(function($) {
  // Above code here.
})(jQuery);

Voir aussi : window.onpopstate lors du chargement de la page

---

Voir également l'exemple de page sur Application à page unique et HTML5 PushState :

<script>
// jQuery
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        //load content with ajax
    }
});

// Vanilla javascript
window.addEventListener('popstate', function (e) {
    var state = e.state;
    if (state !== null) {
        //load content with ajax
    }
});
</script>

Cela devrait être compatible avec Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ et les versions similaires.

Answer 2

(Remarque : j'ai ajouté du code pour détecter le retour arrière en fonction des commentaires de Sharky)

Donc, je vois souvent ces questions sur SO et j'ai récemment rencontré moi-même des problèmes pour contrôler la fonctionnalité du bouton de retour. Après des jours de recherche de la meilleure solution pour mon application (page unique avec navigation hachée), j'ai mis au point un système simple, multi-navigateurs et sans bibliothèque pour détecter le bouton de retour.

La plupart des gens recommandent d'utiliser :

window.onhashchange = function() {
 //blah blah blah
}

Cependant, cette fonction est également appelée lorsque l'utilisateur utilise un élément dans la page qui modifie le hachage de position. Ce n'est pas la meilleure expérience utilisateur lorsque l'utilisateur clique et que la page avance ou recule.

Pour vous donner un aperçu général de mon système, au fur et à mesure que l'utilisateur se déplace dans l'interface, je remplirai un tableau avec les valeurs de hachage précédentes. Cela ressemble à ceci :

function updateHistory(curr) {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

Très simple. Je fais cela pour garantir la prise en charge de tous les navigateurs ainsi que la prise en charge des anciens navigateurs. Transmettez simplement la nouvelle valeur de hachage à la fonction et elle la stockera pour vous, puis modifiera la valeur de hachage (puis la placera dans l'historique du navigateur).

J'ai également profité d'un bouton de retour sur la page qui utilise un tableau lasthash pour déplacer l'utilisateur entre les pages. Cela ressemble à ceci :

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    //blah blah blah
    window.location.lasthash.pop();
}

Cela ramène donc l'utilisateur au dernier hachage et supprime le dernier hachage du tableau (je n'ai pas de bouton avant maintenant).

Alors. Comment puis-je détecter si l'utilisateur a utilisé mon bouton de retour sur la page ou mon bouton de navigateur ?

Au début j'ai regardé window.onbeforeunload mais en vain - il n'est appelé que lorsque l'utilisateur souhaite changer de page. Cela ne se produit pas dans une application d'une seule page utilisant la navigation par hachage.

Ainsi, après quelques recherches supplémentaires, j'ai vu la suggestion d'essayer de définir une variable d'indicateur. Dans mon cas, le problème était que j'essayais de le définir, mais comme tout est asynchrone, il ne serait pas toujours défini à temps pour l'instruction if dans le changement de hachage. .onMouseDown n'est pas toujours appelé en click , et l'ajouter à onclick ne le déclenchera jamais assez rapidement.

Depuis, j'ai commencé à faire des recherches 文档和窗口之间的区别。我的最终解决方案是使用 document.onmouseover 设置该标志，并使用 document.onmouseleave en le désactivant.

Ce qui se passe, c'est que lorsque la souris de l'utilisateur se trouve dans la zone du document (lire : la page rendue, mais pas le cadre du navigateur), mon booléen est défini sur true。一旦鼠标离开文档区域，布尔值就会翻转为 false.

De cette façon, je peux changer window.onhashchange en :

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

Vous remarquerez la vérification de #undefined. En effet, s'il n'y a pas d'historique disponible dans mon tableau, il renvoie undefined. J'utilise ceci pour demander à l'utilisateur s'il souhaite quitter l'événement #undefined 的检查。这是因为如果我的数组中没有可用的历史记录，它将返回 undefined。我用它来询问用户是否想使用 window.onbeforeunload.

Donc, en un mot, pour tous ceux qui n'utilisent pas nécessairement un bouton de retour dans la page ou un tableau pour stocker l'historique :

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

C'est ce que vous voulez. Une approche simple en trois parties pour détecter l'utilisation du bouton de retour par rapport aux éléments de la page en termes de navigation par hachage.

Éditeur :

Pour vous assurer que l'utilisateur n'utilise pas la touche retour arrière pour déclencher l'événement back, vous pouvez également inclure les éléments suivants (grâce à cette question) :

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});