javascript - ejemplo - pushstate jquery

¿Cómo mantener sincronizado el historial del navegador cuando se usa Ajax?

Question

Estoy escribiendo una aplicación de álbum de fotos simple usando ASP.NET Ajax.
La aplicación utiliza llamadas Async Ajax para precargar la siguiente foto del álbum, sin cambiar la URL en el navegador.

El problema es que cuando el usuario hace clic en el botón Atrás en el navegador, la aplicación no vuelve a la foto anterior, sino que navega hacia la página de inicio de la aplicación.

¿Hay alguna manera de engañar al navegador para que agregue cada llamada Ajax al historial de navegación?

Answer 1

La actualización 3.5 SP1 tiene soporte para el historial del navegador y el botón Atrás en ASP.NET ajax ahora.

Answer 2

Muchos sitios web utilizan un iframe oculto para hacerlo, simplemente actualice el iframe con la nueva URL, que lo agrega al historial de navegación. Entonces, todo lo que tiene que hacer es controlar cómo su aplicación reacciona a esos eventos de ''botón de retroceso'': necesitará detectar el estado / ubicación del iframe o actualizar la página usando esa URL.

Answer 3

Para todas las soluciones sobre el botón Atrás, ninguna de ellas es "automática". Con cada uno de ellos tendrá que hacer un trabajo para persistir en el estado de la página. Entonces, no, no hay una forma de "engañar" al navegador, pero hay algunas bibliotecas geniales que lo ayudan con el botón Atrás.

Answer 4

Información : Ajax Navigation es una característica habitual del próximo IE8.

Answer 5

MSDN tiene un artículo sobre la gestión del historial del navegador en ASP.NET AJAX

Answer 6

Puedes usar PathJS lib simple y liviano.

Ejemplo de uso:

Path.map("#/page1").to(function(){
    ...
});

Path.map("#/page2").to(function(){
    ...
});

Path.root("#/mainpage");
Path.listen();

Answer 7

Si está utilizando Rails, entonces definitivamente pruebe Wiselinks https://github.com/igor-alexandrov/wiselinks . Es una navaja suiza para la administración del estado del navegador. Aquí hay algunos detalles: http://igor-alexandrov.github.io/blog/2013/07/11/the-way-to-wiselinks-1-dot-0/ .

Answer 8

Actualización: ahora existe la API de historial de HTML5 (pushState, popState) que desaprueba la funcionalidad de hashchange HTML4. History.js proporciona compatibilidad entre navegadores y una alternativa opcional de hashchange para navegadores HTML4.

La respuesta para esta pregunta será más o menos la misma que mis respuestas para estas preguntas:

• ¿Cómo se muestran las solicitudes de Ajax en la URL?
• ¿Cómo maneja Gmail hacia atrás / adelante en JavaScript enriquecido?

En resumen, definitivamente querrá consultar estos dos proyectos que explican todo el proceso de cambio y agregar ajax a la mezcla:

• jQuery History (usando hashes para administrar el estado de sus páginas y vincularse a los cambios para actualizar su página).

• jQuery Ajaxy (extensión ajax para el historial de jQuery, para permitir que los sitios web de Ajax sean completamente discretos y graciosamente degradables).