Estoy tratando de implementar la navegación de contenido como se hace en Facebook cuando el usuario está navegando por las fotos. Supongo que todo el mundo está familiarizado con la navegación de fotos donde puede hacer clic en "siguiente" y "anterior" e inmediatamente obtener la foto siguiente o anterior (también puede navegar usando las teclas de flecha).página "Redirigir" sin actualizar (estilo de fotos de Facebook)
Cuando hace clic en "siguiente", por ejemplo, observa que la página no actualiza, solo el contenido. Al principio pensé que se hace usando llamadas ajax simples que actualizan solo el "contenido" en este caso la imagen, descripción y comentarios. Pero luego noté que también cambió la URL en la barra de herramientas "Ubicación" de mi navegador. Intenté inspeccionar esto usando Firebug y descubrí que al hacer clic en "Siguiente" solo se descarga la siguiente foto y todavía no sé de dónde provienen los & metadatos de imagen (descripción, hora, etiquetas, ...) cargado.
¿Puede alguien explicar cómo se realiza esta técnica? La página URL cambia sin actualizar la página (o incluso sin página "parpadeando" si se actualiza desde la caché). Sé cómo cambiar el contenido de la página usando ajax pero la URL de esa página permanece igual todo el tiempo. Si hago clic en el botón "actualizar", vuelvo a obtener la primera página. Pero no en Facebook ya que incluso el "window.location" se cambia cada vez sin una redirección real.
La otra cosa que noté es que la barra de herramientas inferior (aplicaciones, chat, ...) está "siempre en la parte superior". Incluso si cambia la página, esta barra de herramientas no se actualiza y siempre permanece en la parte superior; ni siquiera "parpadea" como otras páginas que se actualizan (ya sea desde el servidor web o desde la memoria caché local). Supongo que esta es la misma técnica que la anterior, ¿algún tipo de redirecciones "falsas" o algo así?
la respuesta es pushState
if (window.history.pushState)
window.history.pushState([object or string], [title], [new link]);
Sonreirás :)
Por lo que vale la pena [ History.js] (https://github.com/balupton/History.js) proporciona la misma API de HTML5 al degradar con gracia cualquier navegador que no lo admita (incluido el soporte para datos y títulos, y la funcionalidad replaceState). Usar eso significaría que no tendría que cambiar su código para los cambios de IE9. – balupton