web-dev-qa-db-fra.com

Détecteur de clic du bouton de retour du navigateur JavaScript ou jQuery

Quelqu'un pourrait-il s'il vous plaît partager votre expérience/code pour savoir comment nous pouvons détecter le clic du bouton de retour du navigateur (quel que soit le type de navigateur)?

Nous devons prendre en charge tous les navigateurs qui ne prennent pas en charge HTML5

javascriptjqueryback-button
40
Nil Pun

L'événement 'popstate' ne fonctionne que lorsque vous appuyez sur quelque chose avant. Donc, vous devez faire quelque chose comme ça:

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    window.history.pushState('forward', null, './#forward');

    $(window).on('popstate', function() {
      alert('Back button was pressed.');
    });

  }
});

Pour la compatibilité ascendante du navigateur, je recommande: history.js

51
Benny Neugebauer

il existe de nombreuses façons de détecter si un utilisateur a cliqué sur le bouton Précédent. Mais tout dépend de vos besoins. Essayez d'explorer les liens ci-dessous, ils devraient vous aider.

Détecter si l'utilisateur a appuyé sur le bouton "Retour" de la page actuelle:

Détecter si la page actuelle est visitée après avoir appuyé sur le bouton "Précédent" de la page précédente ("Suivant"):

10
Vlad Mysla

J'ai trouvé que cela fonctionnait bien avec plusieurs navigateurs et mobiles back_button_override.js .

(Ajout d'une minuterie pour safari 5.0)

// managage back button click (and backspace)
var count = 0; // needed for safari
window.onload = function () { 
    if (typeof history.pushState === "function") { 
        history.pushState("back", null, null);          
        window.onpopstate = function () { 
            history.pushState('back', null, null);              
            if(count == 1){window.location = 'your url';}
         }; 
     }
 }  
setTimeout(function(){count = 1;},200);
6
user2992220

En javascript, le type de navigation 2 signifie que le bouton Précédent ou Suivant du navigateur a été cliqué et que le navigateur récupère actuellement le contenu du cache.

if(performance.navigation.type == 2) {
    //Do your code here
}
3
Hasan Badshah

Vous pouvez utiliser ce plugin génial

https://github.com/ianrogren/jquery-backDetect

Tout ce que vous avez à faire est d'écrire ce code

  $(window).load(function(){
    $('body').backDetect(function(){
      // Callback function
      alert("Look forward to the future, not the past!");
    });
  });

Meilleur

1
Hussam Kurd

Désactiver le bouton URL en suivant la fonction

window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle the 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 FF and IE9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
};
0
Sakthi Karthik

En cas de HTML5 cela fera l'affaire

window.onpopstate = function() {
   alert("clicked back button");
}; history.pushState({}, '');
0
Ashik Jyothi

Il est disponible dans l'API de l'historique HTML5. L'événement s'appelle 'popstate'

0
Eric

Dans mon cas, j'utilise jQuery .load() pour mettre à jour les DIV dans un SPA (une seule page [web] app) .

Étant nouveau pour travailler avec $(window).on('hashchange', ..) écouteur d'événement, celui-ci s'est avéré difficile et a pris un peu de temps à pirater. Grâce à la lecture de nombreuses réponses et à l’essai de différentes variantes, nous avons enfin compris comment le faire fonctionner de la manière suivante. Pour autant que je sache, il semble stable jusqu'à présent.

En résumé - il y a la variable globalCurrentHash qui devrait être définie chaque fois que vous chargez une vue.

Ensuite, lorsque $(window).on('hashchange', ..) écouteur d'événements est exécuté, il vérifie les éléments suivants:

  • Si location.hash A la même valeur, cela signifie Aller de l'avant
  • Si location.hash A une valeur différente, cela signifie Revenir en arrière

Je réalise que l'utilisation de vars globaux n'est pas la solution la plus élégante, mais faire les choses OO dans JS me semble difficile jusqu'à présent. Les suggestions d'amélioration/de raffinement ont certainement été appréciées

Configuration:

  1. Définir une variable globale:
    var globalCurrentHash = null;

  1. Lorsque vous appelez .load() pour mettre à jour la DIV, mettez également à jour la variable globale:

    function loadMenuSelection(hrefVal) {
  $('#layout_main').load(nextView);
  globalCurrentHash = hrefVal;
}

  2. Lorsque la page est prête, configurez l'écouteur pour qu'il vérifie la variable globale afin de voir si le bouton Précédent est activé:

    $(document).ready(function(){
  $(window).on('hashchange', function(){
      console.log( 'location.hash: ' + location.hash );
      console.log( 'globalCurrentHash: ' + globalCurrentHash );

      if (location.hash == globalCurrentHash) {
          console.log( 'Going fwd' );
      }
      else {

          console.log( 'Going Back' );
          loadMenuSelection(location.hash);
      }
    });

});
0
Gene Bo