2010-07-26 21 views
490

Soñé con Chrome (dev channel) implementando una forma de actualizar la barra de direcciones a través de javascript (la ruta, no el dominio) sin recargar la página o realmente lo han hecho esta.Actualizando la barra de direcciones con nueva URL sin hash o recargando la página

Sin embargo, no puedo encontrar el artículo I piensa que leo.

¿Estoy loco o hay una manera de hacer esto (en Chrome)?

p.s. No estoy hablando de window.location.hash, et al. Si lo anterior existe, the answer to this question será falso.

+3

duplicado posible de [Modificar la URL sin recargar la página] (http://stackoverflow.com/questions/824349/modify -the-url-without-reloading-the-page) –

+0

@tobiaskienzler Cuando esa pregunta se le preguntó originalmente en 2009, no fue posible. –

+1

Por supuesto que no. Pero ahora lo es, las _ preguntas_ piden lo mismo. Una lástima, aunque el otro tiene una respuesta obsoleta aceptada (por ti, me di cuenta) ... ¿Sabes qué? Vamos a cerrar de lado a la inversa, nadie dijo que el "original" tiene que ser el más antiguo, de hecho hay precedentes –

Respuesta

712

¡Ahora puede hacerlo en la mayoría de los navegadores "modernos"!

Aquí está el artículo original que leí (publicado el 10 de julio de 2010): HTML5: Changing the browser-URL without refreshing page.

Para una vista más detallada de pushState/replaceState/popstate (también conocido como la API de historial HTML5) see the MDN docs.

TL; DR, usted puede hacer esto:

window.history.pushState("object or string", "Title", "/new-url"); 

Véase mi respuesta a Modify the URL without reloading the page para un básico de cómo hacerlo.

+3

Ah, la funcionalidad está en WebKit y aterrizó hace unos meses . Buen hallazgo! – oldestlivingboy

+5

esto ahora lo usa github, mientras que la navegación en árbol – Valerij

+1

@Vprimachenko: Sí. Y me rompen el botón de atrás de vez en cuando. –

88

cambiando sólo lo que está después de hash - navegadores antiguos

document.location.hash = 'lookAtMeNow'; 

Cambio de URL completa Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', 'https://stackoverflow.com/test'); 

La voluntad por encima (el dominio y el protocolo debe ser el mismo que el original!) agregue una nueva entrada al historial para que pueda presionar el botón Atrás para ir al estado anterior. Para cambiar la URL en su lugar sin agregar una nueva entrada al historial use

history.replaceState('data to be passed', 'Title of the page', 'https://stackoverflow.com/test'); 

¡Intente ejecutar estos en la consola ahora!

+6

'replaceState' era exactamente lo que necesitaba, gracias por ampliar la respuesta original. – meetalexjohnson

+2

Esto es tan rápido y al punto, necesita más votos ascendentes. – moodboom

+0

'the domain ¡y el protocolo debe ser el mismo que el original! "Esto evita que un sitio de pesca cambie la URL de la barra de direcciones. – Tianqing

6

actualización a la respuesta Davids de detectar incluso los navegadores no soporta pushState:

if (history.pushState) { 
    window.history.pushState("object or string", "Title", "/new-url"); 
} else { 
    document.location.href = "/new-url"; 
} 
+0

document.location.href vuelve a cargar la página – paullb

+1

@paullb que es una alternativa para los navegadores más antiguos t sombrero no apoyaría ninguna manera de hacerlo sin recargar –

Cuestiones relacionadas