¿Cómo puedo cambiar la URL actual?

100

Tengo el siguiente código que cambia las páginas desde JavaScript:

var newUrl = [some code to build up URL string];
window.location.replace(newUrl);

Pero no cambia la URL superior, por lo que cuando alguien hace clic en el botón Atrás, no vuelve a la página anterior.

¿Cómo puedo hacer que JavaScript cambie también la URL superior para que funcione el botón de retroceso del navegador?

javascript leora
fuente

Respuestas:

38

La asignación simple a window.locationo window.location.hrefdebería estar bien:

window.location = newUrl;

Sin embargo, su nueva URL hará que el navegador cargue la nueva página, pero parece que le gustaría modificar la URL sin salir de la página actual. Tienes dos opciones para esto:

  1. Utilice el hash de la URL. Por ejemplo, puede pasar de example.coma example.com#foosin cargar una página nueva. Simplemente puede configurarlo window.location.hashpara que esto sea más fácil. Luego, debe escuchar el hashchangeevento HTML5 , que se activará cuando el usuario presione el botón Atrás. Esto no es compatible con versiones anteriores de IE, pero echa un vistazo a jQuery BBQ , que hace que esto funcione en todos los navegadores.

  2. Puede utilizar el historial de HTML5 para modificar la ruta sin volver a cargar la página. Esto le permitirá cambiar de example.com/fooa example.com/bar. Usar esto es fácil:

    window.history.pushState("example.com/foo");

    Cuando el usuario presiona "atrás", recibirá el popstateevento de la ventana , que puede escuchar fácilmente (jQuery):

    $(window).bind("popstate", function(e) { alert("location changed"); });

    Desafortunadamente, esto solo es compatible con navegadores muy modernos, como Chrome, Safari y Firefox 4 beta.

bcherry
fuente
el método .replace en cadenas no cambiará la cadena a la que se aplicó, generará una nueva cadena. " - el window.location.replace()método no es el mismo que el String.prototype.replace()método porque window.locationno es una cadena (es un objeto). window.location.replace()reemplaza el actual URL con una nueva, mientras se sobrescribe la entrada de la URL anterior en el historial.
Andy E
1
Gracias por la corrección, actualizaré mi respuesta en consecuencia.
bcherry
2
Mirando hacia atrás, esta es, con mucho, la mejor respuesta. document.location.href no tiene nada en pushState
buley
7

Hmm, usaría

window.location = 'http://localhost/index.html#?options=go_here';

No estoy seguro de si eso es lo que quieres decir.

Licuadora
fuente
7

Si solo desea actualizar la ruta relativa, también puede hacerlo

window.location.pathname = '/relative-link'

"http://domain.com" -> "http://domain.com/relative-link"

Artokun
fuente
0 
<script> 
    var url= "http://www.google.com"; 
    window.location = url; 
</script>
user3230794
fuente