tag - JavaScript o el botón de retroceso del navegador jQuery hacen clic en el detector

title of page html

Question

¿Podría alguien compartir la experiencia / código de cómo podemos detectar el clic del botón de retroceso del navegador (para cualquier tipo de navegadores)?

Necesitamos atender todos los navegadores que no sean compatibles con HTML5

Answer 1

Deshabilite el botón url siguiendo la función

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

Answer 2

El evento ''popstate'' solo funciona cuando presionas algo antes. Entonces tienes que hacer algo como esto:

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.'');
    });

  }
});

Para la compatibilidad con versiones anteriores del navegador recomiendo: history.js

Answer 3

En el caso de HTML5 esto hará el truco

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

Answer 4

En mi caso, estoy usando jQuery .load() para actualizar los DIV en un SPA (aplicación de página única [web]) .

Siendo nuevo en el trabajo con $(window).on(''hashchange'', ..) event listener, este demostró ser desafiante y tardó un poco en hackear. Gracias a leer muchas respuestas y probar diferentes variaciones, finalmente descubrí cómo hacer que funcione de la siguiente manera. Hasta donde puedo decir, se ve estable hasta el momento.

En resumen, existe la variable globalCurrentHash que debe establecerse cada vez que carga una vista.

Luego, cuando se $(window).on(''hashchange'', ..) event listener, comprueba lo siguiente:

• Si location.hash tiene el mismo valor, significa Ir hacia adelante
• Si location.hash tiene un valor diferente, significa retroceder

Me doy cuenta de que el uso de vars globales no es la solución más elegante, pero hacer las cosas OO en JS me parece complicado hasta ahora. Sugerencias de mejora / refinamiento ciertamente apreciadas

Preparar:

1. Definir una var global

    var globalCurrentHash = null;

2. Al llamar .load() para actualizar el DIV, actualice también la var global:

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

3. En la página preparada, configure el oyente para verificar la var global para ver si se presiona el botón Atrás:

   $(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);
         }
       });
   
   });

Answer 5

Encontré esto para que funcione bien en el navegador y en el dispositivo móvil back_button_override.js .

(Se agregó un temporizador para 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);

Answer 6

Está disponible en la API de historial de HTML5. El evento se llama ''popstate''

Answer 7

Hay muchas maneras de detectar si el usuario ha hecho clic en el botón Atrás. Pero todo depende de tus necesidades. Intenta explorar los enlaces a continuación, ellos deberían ayudarte.

Detecta si el usuario presionó el botón "Atrás" en la página actual:

• ¿Hay alguna manera de usar Jquery para detectar el botón Atrás que se está presionando?
• detectar botón de retroceso, haga clic en el navegador

Detecta si se visita la página actual después de presionar el botón "Atrás" en la página anterior ("Reenviar"):

• ¿Hay un evento de carga entre navegadores al hacer clic en el botón Atrás?
• desencadenar evento en el botón Atrás del navegador haga clic

Answer 8

Puedes usar este increíble plugin

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

Todo lo que necesitas hacer es escribir este código

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

Mejor