détecter un clic sur le bouton retour dans le navigateur

Question

Je dois détecter si un utilisateur a cliqué sur le bouton retour ou non. Pour cela, j'utilise

window.onbeforeunload = function (e) {
}

Cela fonctionne si un utilisateur clique sur le bouton retour. Mais cet événement est également déclenché si un utilisateur clique sur F5 ou sur le bouton de rechargement du navigateur. Comment puis-je résoudre ce problème ?

Answer 1

Donc, en ce qui concerne AJAX...

Le fait d'appuyer sur la touche retour lors de l'utilisation de la plupart des applications web qui utilisent AJAX pour naviguer dans des parties spécifiques d'une page est un problème énorme. Je n'accepte pas l'idée selon laquelle "le fait de devoir désactiver le bouton signifie que vous faites quelque chose de mal" et, en fait, les développeurs de différentes disciplines sont confrontés à ce problème depuis longtemps. Voici ma solution :

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;   
            }
        };
    }
}

D'après ce que j'ai pu constater, cela fonctionne sur chrome, firefox, Je n'ai pas encore testé IE .

Answer 2

Veuillez essayer ceci (si le navigateur ne prend pas en charge "onbeforeunload") :

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

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

    $(window).on('popstate', function() {
      var hashLocation = location.hash;
      var hashSplit = hashLocation.split("#!/");
      var hashName = hashSplit[1];

      if (hashName !== '') {
        var hash = window.location.hash;
        if (hash === '') {
          alert('Back button was pressed.');
        }
      }
    });

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

});

Answer 3

le meilleur moyen que je connaisse

         window.onbeforeunload = function (e) {
            var e = e || window.event;
            var msg = "Do you really want to leave this page?"

            // For IE and Firefox
            if (e) {
                e.returnValue = msg;
            }

            // For Safari / chrome
            return msg;
         };

Answer 4

Le bouton retour étant une fonction du navigateur, il peut être difficile de modifier la fonctionnalité par défaut. Il existe cependant quelques solutions de contournement. Jetez un coup d'œil à cet article :

http://www.irt.org/script/311.htm

En général, la nécessité de désactiver le bouton retour est un bon indicateur d'un problème ou d'un défaut de programmation. Je chercherais une autre méthode, comme la définition d'une variable de session ou d'un cookie qui enregistre si le formulaire a déjà été soumis.

Answer 5

Je suppose que vous essayez de gérer la navigation Ajax et que vous n'essayez pas d'empêcher vos utilisateurs d'utiliser le bouton retour, ce qui viole à peu près tous les principes du développement d'interfaces utilisateur.

Voici quelques solutions possibles : Histoire de JQuery Salajax Un meilleur bouton de retour Ajax