cambiar url sin recargar javascript

¿Cómo reescribe facebook la URL de origen de una página en la barra de direcciones del navegador?

Question

Vaya a http://www.facebook.com/facebook?v=wall , luego haga clic en la pestaña de información. El contenido se cargará y la barra de direcciones ahora se convierte en http://www.facebook.com/facebook?v=info pero la página web no se volvió a cargar.

Al principio creo que es Ajax, pero mi pregunta es, ¿cómo cambias la barra de direcciones sin volver a cargar? Sé que puedo cambiar el ancla (#wall) usando JS pero querystring (? V = wall), ¿cómo?

Answer 1

@Snoob - Te agradecería si aceptaras la respuesta de @ bobince en su lugar, él estaba en el camino correcto sobre los detalles aquí primero. Como no puedo borrar / eliminar esto hasta que no se acepte, lo actualizaré para que sea lo más correcto posible.

Por el momento es algo específico de WebKit (Chrome, Safari, etc.) que estás viendo (o más bien, no lo ves), como señala @ en otros navegadores, puedes ver la URL real en la barra:

http://www.facebook.com/facebook?v=wall#!/facebook?v=info/

Donde Chrome solo muestra:

http://www.facebook.com/facebook?v=info

Tiene un poco de sentido, dado que así es como se puede rastrear el contenido de AJAX con el motor de búsqueda de Google , para que su navegador reconozca de dónde proviene el contenido.

Corrección en los detalles: los navegadores web muestran la URL acortada. Facebook quiere usar las características de la historia HTML 5. Puedes ver el código aquí (echa un vistazo al HistoryManager ), en este caso específicamente están usando .replaceState() para reemplazar la URL. fuiste con el directo disponible.

Nota: Es posible que esta respuesta no sea válida más adelante (el bit específico de WebKit), ya que otros navegadores admiten funciones HTML5 cada vez más, esto puede quedar obsoleto rápidamente.

Answer 2

No tengo Facebook, así que no puedo verificar. Pero estoy seguro al 95% de que tiene que ser una solicitud de página completa, la barra de ubicación no es válida porque sería una característica muy útil para los sitios web de phishing (en lugar de http://fakeonlinebank.com reescribir a http: // yourtrustybank ). Es probable que sea tan rápido que parece que su navegador solo carga esa parte?

Pero tengo curiosidad por ver si alguien me va a corregir esto, porque eso significaría que tienen la respuesta que desea escuchar;)

Answer 3

Para los desarrolladores de MooTools, recomiendo consultar el plugin de mootools-history cpojer, que brinda soporte para la API de historial nativo cuando está disponible, con un retorno a los hash.

Answer 4

Está utilizando la nueva característica history.pushState() HTML5 para permitir que la página se disfrace de estar en una URL diferente a la original desde la cual fue captada.

Esto parece ser solo compatible con WebKit en este momento, y es por eso que el resto de nosotros estamos viendo ?v=wall#!/facebook?v=info lugar de ?v=info .

La característica permite que las páginas cargadas dinámicamente se marquen como favoritos, se intercambien, etc. entre los agentes de soporte de JS y los que no soportan JS. Porque si como usuario de JS vinculó a alguien con ?v=wall#!/facebook?v=info y su navegador no admitía JS y XMLHttpRequest, la página no funcionaría para ellos. El #! también se utiliza como un consejo para que los motores de búsqueda descarguen la versión que no es AJAX.