> Faqs > Cómo cambiar con Javascript la URL de la barra de direcciones sin provocar navegación

Cómo cambiar con Javascript la URL de la barra de direcciones sin provocar navegación

Quiero hacer una funcionalidad en Javascript para cambiar la URL de la barra de direcciones sin provocar navegación.

¿cómo se hace para añadir un nuevo estado en la barra de direcciones del navegador sin provocar irse a otra página?

Respuestas

Para añadir un nuevo estado (cambiar la URL visible) en la barra de direcciones del navegador sin cambiar de página, puedes utilizar la función pushState del objeto history de JavaScript.

Ese método es un poco peliagudo porque requiere recibir varios datos aparte de la url nueva que quieres meter en la barra de de direcciones.

Primero requiere un estado, que podrías guardar para almacenar datos de navegación, o un objeto vacío si no quieres guardar nada

var estado = { /* datos del estado que desees guardar */ };

Luego requiere título, que realmente no se usa para nada (es decir, no te cambia el title de la pestaña)

var titulo = '';

Luego necesitas la URL a la que quieres que se actualice la barra de direcciones

var nuevaUrl = '/nueva-url';

Con todo eso ya puedes cambiar la barra de direcciones con el método pushState del objeto history del navegador. Se hace así.

history.pushState(estado, titulo, nuevaUrl);

Por cierto, por si lo necesitas, cuando utilizas pushState, el estado que especificas se puede recuperar posteriormente mediante el evento popstate del objeto window. Si requieres hacer eso o necesitas más información sobre este proceso te recomiendo ver el artículo del objeto history de Javascript.

Con esto podrás modificar la URL visible en la barra de direcciones sin recargar la página. Es una de las funcionalidades básicas con las que se hacen los sistemas de routing en Javascript.

Camila
680 29 46 6
Eso era lo que necesitaba, muchas gracias!