Modificar url con JavaScript
En este tutorial vamos a aprender cómo modificar la url de nuestra página utilizando JavaScript sin cambiar la página en la que estamos. Para ello usaremos el método window.history.pushState
Método pushState
El método pushState de la clase history crea un nuevo registro en el historial asociado al documento actual. Es similar a widow.location, pero en este caso lo usaremos sin que se ejecute el cambio de página, sin que el navegador cargue la nueva url.
Veamos un ejemplo
// Estamos en la url "https://youtube.es/videos/343434/23kkk2 // Vamos a hacer que en la url ponga "https://youtube.es" window.history.pushState(null, "", "videos"); // La url de nuestra página cambiará // Ahora la url será "https://youtube.es/videos"
Ejemplo de uso
// Desde la página actual "https://tutobasico.com/tutoriales" cargamos una nueva window.location = "comments?id=1&state=1"; // Tras el cambio de página nuestra url quedará así // "https://tutobasico.com/comments?id=1&state=1 // Utilizamos el método pushState para limpiar los parámetros window.history.pushState(null, "", comments); // Y ahora nuestra url quedará así // "https://tutobasico.com/comments
Más métodos de la clase History de JavaScript
Si te ha gustado no olvides compartir en redes sociales.
[addthis tool=»addthis_inline_share_toolbox_6jt6″]
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo