Modificar la URL de la Barra de Direcciones en la Aplicación AJAX para Que Coincida con el Estado Actual

Mira sitios como book.cakephp.org. Este sitio cambia la URL sin usar el hash y usa AJAX. No estoy seguro de cómo lo hace exactamente, pero he estado tratando de averiguarlo. Si alguien lo sabe, házmelo saber.

También github.com cuando se mira una navegación dentro de un determinado proyecto.

Es poco probable que el escritor quiera recargar o redirigir a su visitante cuando usa Ajax. Pero por qué no usar HTML5 pushState/replaceState?

Podrás modificar la barra de direcciones tanto como quieras. Obtenga urls de aspecto natural, con AJAX.

Echa un vistazo al código de mi último proyecto: http://iesus.se /

Esto es similar a lo que dijo Kevin. Puede tener el estado de su cliente como un objeto javascript, y cuando quiera guardar el estado, serialice el objeto (utilizando la codificación JSON y base64). A continuación, puede establecer el fragmento de la href a esta cadena.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

La primera forma tratará el nuevo estado como una nueva ubicación (por lo que el botón atrás los llevará a la ubicación anterior). Este último no lo hace.

SWFAddress funciona en proyectos Flash y Javascript y le permite crear direcciones URL marcables (utilizando el método hash mencionado anteriormente), así como darle soporte para botones de retroceso.

Http://www.asual.com/swfaddress /

La ventana.ubicación.el método hash es la forma preferida de hacer las cosas. Para una explicación de cómo hacerlo, Patrones Ajax - URLs únicas.

YUI tiene una implementación de este patrón como un módulo, que incluye soluciones específicas de IE para hacer que el botón atrás funcione junto con la reescritura de la dirección usando el hash. YUI Browser History Manager.

Otros frameworks también tienen implementaciones similares. El punto importante es si quieres la historia para trabajar junto con la reescritura de la dirección, los diferentes navegadores necesitan diferentes formas de manejarla. (Esto se detalla en el primer artículo de enlace.)

IE necesita un hack basado en iframe, donde Firefox producirá doble historial utilizando el mismo método.

Si OP u otros todavía están buscando una manera de modificar el historial del navegador para habilitar el estado, usando pushState y replaceState, como sugiere IESUS, es la forma 'correcta' de hacerlo ahora. Es la principal ventaja sobre la ubicación.hash parece ser que crea urls reales, no solo hashes. Si se guarda el historial del navegador usando hashes y luego se vuelve a visitar con javascript deshabilitado, la aplicación no funcionará, ya que los hashes no se envían al servidor. Sin embargo, si se ha utilizado pushState, toda la ruta será enviado al servidor, que luego puede compilar para responder adecuadamente a las rutas. Vi un ejemplo en el que se usaban las mismas plantillas de bigote tanto en el lado del servidor como en el del cliente. Si el cliente tuviera javascript habilitado, obtendría respuestas rápidas evitando el viaje de ida y vuelta al servidor, pero la aplicación funcionaría perfectamente sin javascript. Por lo tanto, la aplicación puede degradarse con gracia en ausencia de javascript.

También, creo que hay algún marco por ahí, con un nombre como la historia.js. Para los navegadores que admiten HTML5, utiliza pushState, pero si el navegador no lo admite, automáticamente vuelve a usar hashes.

Compruebe si el usuario está 'en' la página, cuando hace clic en la barra de url, javascript dice que está fuera de la página. Si cambia la barra de url y presiona 'ENTER' con el símbolo '#' dentro de ella, entonces entrará en la página nuevamente, sin hacer clic en la página manualmente con el cursor del mouse, luego un comando de evento de teclado (document.onkeypress) de javascript será capaz de comprobar si es entrar y activar el javascript para la redirección. Puede comprobar si el usuario está EN la página con ventana.enfocus y comprobar si está fuera con ventana.onblur.

;)