Este grupo redactor ha estado largas horas buscando la resolución a tu duda, te brindamos la soluciones de modo que deseamos que te resulte de mucha ayuda.
Solución:
(Nota: según los comentarios de Sharky, he incluido código para detectar retrocesos)
Por lo tanto, he visto estas preguntas con frecuencia en SO, y recientemente me he encontrado con el problema de controlar la funcionalidad del botón de retroceso yo mismo. Después de unos días de buscar la mejor solución para mi aplicación (página única con navegación hash), se me ocurrió un sistema simple, sin biblioteca y entre navegadores para detectar el botón Atrás.
La mayoría de la gente recomienda usar:
window.onhashchange = function()
//blah blah blah
Sin embargo, esta función también se llamará cuando un usuario use un elemento en la página que cambia el hash de ubicación. No es la mejor experiencia de usuario cuando su usuario hace clic y la página avanza o retrocede.
Para darle un esquema general de mi sistema, estoy completando un array con hashes anteriores a medida que mi usuario se mueve a través de la interfaz. Se parece a esto:
function updateHistory(curr)
window.location.lasthash.push(window.location.hash);
window.location.hash = curr;
Muy claro. Hago esto para garantizar la compatibilidad con varios navegadores, así como la compatibilidad con navegadores más antiguos. Simplemente pase el nuevo hash a la función, y lo almacenará para usted y luego cambiará el hash (que luego se coloca en el historial del navegador).
También utilizo un botón de retroceso en la página que mueve al usuario entre páginas usando el lasthash array. Se parece a esto:
function goBack()
window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
//blah blah blah
window.location.lasthash.pop();
Así que esto moverá al usuario al último hash y eliminará ese último hash del array (No tengo ningún botón de avance en este momento).
Entonces. ¿Cómo puedo detectar si un usuario ha utilizado mi botón de retroceso en la página o el botón del navegador?
Al principio miré window.onbeforeunload, pero en vano, solo se llama si el usuario va a cambiar de página. Esto no sucede en una aplicación de una sola página que utiliza navegación hash.
Entonces, después de investigar un poco más, vi recomendaciones para intentar establecer una variable de marca. El problema con esto en mi caso es que intentaría configurarlo, pero como todo es asincrónico, no siempre se configurará a tiempo para la declaración if en el cambio de hash. .onMouseDown no siempre se llamaba con un clic, y agregarlo a un onclick nunca lo activaría lo suficientemente rápido.
Fue entonces cuando comencé a ver la diferencia entre document, y window. Mi solución final fue establecer la bandera usando document.onmouseovery desactívelo usando document.onmouseleave.
Lo que sucede es que mientras el mouse del usuario está dentro del área del documento (léase: la página renderizada, pero excluyendo el marco del navegador), mi booleano está configurado en true. Tan pronto como el mouse abandona el área del documento, el booleano cambia a false.
De esta manera, puedo cambiar mi window.onhashchange para:
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();
Notarás el cheque por #undefined. Esto se debe a que si no hay historial disponible en mi array, vuelve undefined. Utilizo esto para preguntarle al usuario si quiere salir usando un window.onbeforeunload evento.
Entonces, en resumen, y para las personas que no necesariamente usan un botón de retroceso en la página o un array para almacenar el historial:
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
Y ahí lo tienes. una forma simple de tres partes para detectar el uso del botón de retroceso frente a los elementos en la página con respecto a la navegación hash.
EDITAR:
Para asegurarse de que el usuario no use la tecla de retroceso para activar el evento de retroceso, también puede incluir lo siguiente (gracias a @thetoolman en esta pregunta):
$(function()
/*
* this swallows backspace keys on any non-input element.
* stops backspace -> back
*/
var rx = /INPUT);
Puedes probar popstate controlador de eventos, por ejemplo:
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);
Nota: Para obtener los mejores resultados, debe cargar este código solo en páginas específicas donde desea implementar la lógica para evitar otros problemas inesperados.
El evento popstate se activa cada vez que cambia la entrada actual del historial (el usuario navega a un nuevo estado). Eso sucede cuando el usuario hace clic en los botones Atrás / Adelante del navegador o cuando history.back(), history.forward(), history.go() los métodos se llaman programáticamente.
los event.state Esta propiedad del evento es igual al objeto de estado histórico.
Para la sintaxis de jQuery, envuélvalo (para agregar incluso un oyente después de que el documento esté listo):
(function($)
// Above code here.
)(jQuery);
Ver también: window.onpopstate al cargar la página
Consulte también los ejemplos sobre aplicaciones de una sola página y la página pushState de HTML5:
Esto debería ser compatible con Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ y similares.
Había estado luchando con este requisito durante bastante tiempo y tomé algunas de las soluciones anteriores para implementarlo. Sin embargo, me encontré con una observación y parece funcionar en los navegadores Chrome, Firefox y Safari + Android y iPhone.
En la carga de la página:
window.history.pushState(page: 1, "", "");
window.onpopstate = function(event)
// "event" object seems to contain value only when the back button is clicked
// and if the pop state event fires due to clicks on a button
// or a link it comes up as "undefined"
if(event)
// Code to handle back button or prevent from navigation
else
// Continue user action through link or button
Déjeme saber si esto ayuda. Si me falta algo, estaré feliz de entenderlo.
Sección de Reseñas y Valoraciones
Te invitamos a ayudar nuestro estudio escribiendo un comentario o dejando una puntuación te estamos eternamente agradecidos.