¿Hay alguna manera de responder al botón de retroceso que se está presionando (o al presionar el retroceso) en javascript cuando solo cambia el hash de ubicación? Es decir, cuando el navegador no se está comunicando con el servidor o recargando la página.¿Hay alguna manera de atrapar el evento del botón Atrás en JavaScript?
Uso caso hashchange:
window.addEventListener("hashchange", function(e) {
// ...
})
Si tiene que soportar los navegadores antiguos, echa un vistazo a la página wiki hashChange Event section en polyfills HTML5 Cruz navegador de Modernizr.
onLocationChange también puede ser útil. No estoy seguro de si esto es solo una cuestión de Mozilla, parece que podría ser.
¿Has echado un vistazo a esto? http://developer.yahoo.com/yui/history/
esto es realmente interesante. Ahora tengo que averiguar cómo está haciendo este comportamiento –
ah, por lo que esto también funciona por sondeo –
He creado un solution que puede ser útil para algunas personas. Simplemente incluya el código en su página, y puede escribir su propia función que se llamará cuando se haga clic en el botón Atrás.
He probado en IE, FF, Chrome y Safari, y todos están funcionando. La solución que tengo funciona basada en iframes sin necesidad de sondeo constante, en IE y FF, sin embargo, debido a las limitaciones en otros navegadores, el hash de ubicación se usa en Safari.
Esto se ve bastante pulido, y tiene un testimonio. ¿Alguien más tiene algo bueno que decir al respecto? – MrBoJangles
No sé por qué no funcionó para mí, utilicé angular por cierto, la URL hash comenzó a ir anterior y siguiente antes cuando acabo de cargar el archivo js. –
En lugar de simplemente proporcionar un enlace y explicar que lo ha probado, si pudiera explicar cómo funciona y por qué eligió esa ruta, sería muy útil. – domdambrogia
Hice un truco divertido para resolver este problema a mi entera satisfacción. Tengo un sitio AJAX que carga contenido de forma dinámica, luego modifica window.location.hash, y tuve código para ejecutar sobre $ (document) .ready() para analizar el hash y cargar la sección correspondiente. El caso es que estaba perfectamente satisfecho con el código de carga de mi sección para navegación, pero quería agregar una forma de interceptar los botones de navegación hacia atrás y hacia adelante, que cambian la ubicación de la ventana, pero no interfieren con mis rutinas actuales de carga de páginas donde manipulo el window.location, y sondear la ventana. ubicación a intervalos constantes estaba fuera de la cuestión.
Lo que terminé haciendo fue la creación de un objeto como tal:
var pageload = {
ignorehashchange: false,
loadUrl: function(){
if (pageload.ignorehashchange == false){
//code to parse window.location.hash and load content
};
}
};
Entonces, he añadido una línea a mi sitio script para ejecutar la función pageload.loadUrl en el caso hashchange, como tal:
window.addEventListener("hashchange", pageload.loadUrl, false);
Entonces, cuando quiera modificar la window.location.hash sin activar esta rutina de carga de la página, que sólo tiene que añadir la siguiente línea antes de cada línea window.location.hash =:
pageload.ignorehashchange = true;
y luego la siguiente línea al final de cada modificación de hash:
setTimeout(function(){pageload.ignorehashchange = false;}, 100);
Así que ahora mis sección de carga de rutinas están normalmente en funcionamiento, pero si el usuario pulsa los botones 'atrás' o 'hacia adelante', la la nueva ubicación se analiza y se carga la sección correspondiente.
Echa un vistazo history.js. Hay un evento html 5 statechange y puedes escucharlo.
Es bueno ver que las respuestas de StackOverflow ya están llegando a la parte superior de los hits de google para las viejas preguntas. Esto funcionó para mí, pero había algunas condiciones con problemas en el código que estaba llamando si cambiaba, lo que no permitía que la línea de cambio de hash se ejecutara. Un buen consejo podría ser hacerlo por última vez. – ironfroggy
En los navegadores actuales, debe usar el evento onhashchange http://msdn.microsoft.com/en-us/library/cc288209(v=vs.85).aspx – EricLaw
Buena mejora en la respuesta. – pqsk