javascript - que - detectar el botón Atrás haz clic en el navegador

pushstate w3schools

Question

Esta pregunta ya tiene una respuesta aquí:

• Llamada interceptada al botón Atrás en mi aplicación AJAX: ¡No quiero que haga nada! 9 respuestas

Debo detectar si un usuario ha hecho clic en el botón Atrás o no. Para esto estoy usando

window.onbeforeunload = function (e) {
}

Funciona si un usuario hace clic en el botón Atrás. Pero este evento también se activa si un usuario hace clic en F5 o vuelve a cargar el botón del navegador. ¿Cómo puedo solucionar esto?

Answer 1

Como el botón Atrás es una función del navegador, puede ser difícil cambiar la funcionalidad predeterminada. Aunque hay algunas soluciones alternativas. Mira este articulo:

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

Por lo general, la necesidad de desactivar el botón Atrás es un buen indicador de un problema / error de programación. Buscaría un método alternativo, como establecer una variable de sesión o una cookie que almacene si el formulario ya se ha enviado.

Answer 2

Estoy detectando el botón Atrás de esta manera:

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

Funciona, pero tengo que crear una cookie en Chrome para detectar que estoy en la página la primera vez porque cuando ingreso en la página sin control por cookie, el navegador realiza la acción de retorno sin hacer clic en ningún botón de retroceso.

if (typeof history.pushState === "function"){
history.pushState("jibberish", null, null); 
window.onpopstate = function () {
    if ( ((x=usera.indexOf("Chrome"))!=-1) && readCookie(''cookieChrome'')==null ) 
    {
        addCookie(''cookieChrome'',1, 1440);      
    } 
    else 
    {
        history.pushState(''newjibberish'', null, null);  
    }
};

}

Y MUY IMPORTANTE, history.pushState("jibberish", null, null); duplica el historial del navegador.

¿Alguien sabe a quién puedo arreglar?

Answer 3

La mejor manera que conozco

         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

Por favor intente esto (si el navegador no es compatible con "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 5

Por lo que respecta a AJAX ...

Presionando hacia atrás mientras se usa la mayoría de las aplicaciones web que usan AJAX para navegar por partes específicas de una página es un tema ENORME. No acepto que ''tener que deshabilitar el botón signifique que estás haciendo algo mal'' y, de hecho, los desarrolladores en diferentes facetas se han topado con este problema desde hace mucho tiempo. Aquí está mi solució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;   
            }
        };
    }
}

Por lo que he podido decir esto funciona en Chrome, Firefox, aún no he probado IE .

Answer 6

Supongo que está tratando de lidiar con la navegación de Ajax y no está tratando de evitar que los usuarios usen el botón Atrás, lo que infringe casi todos los principios del desarrollo de la interfaz de usuario.

Aquí hay algunas soluciones posibles: JQuery History Salajax A Better Ajax Back Button