Modificar la URL en JavaScript sin recargar la página

Cambiar la URL dinámicamente con JavaScript

Cuando trabaje con aplicaciones web modernas, es posible que necesite modificar la URL sin provocar una recarga de la página. Esto puede resultar especialmente útil para crear una experiencia de usuario perfecta.

En esta guía, exploraremos métodos para cambiar la parte de la URL después del dominio, incluidas técnicas que le permiten acceder a la parte antes del símbolo almohadilla (#). Esto garantiza el cumplimiento de las políticas entre dominios y al mismo tiempo logra la modificación de URL deseada.

Explicación detallada de la modificación de URL en JavaScript

El primer guión utiliza el history.pushState() método, que es parte de la API History. Este comando permite a los desarrolladores agregar una nueva entrada a la pila del historial de sesiones del navegador, cambiando efectivamente la URL que se muestra en la barra de direcciones sin recargar la página. En el guión, const newURL = "/page2.php"; establece el nuevo camino, y history.pushState(null, "", newURL); cambia la URL a esta nueva ruta. Al envolver el history.pushState comando en una función como function changeURL(newPath), podemos actualizar dinámicamente la URL según sea necesario. Esta técnica es especialmente útil para aplicaciones de una sola página (SPA) donde el contenido cambia dinámicamente sin recargar toda la página.

El segundo script aborda el cambio del hash de la URL usando window.location.hash. Esta propiedad obtiene o establece la parte ancla de la URL que sigue al símbolo de almohadilla (#). Configurando const hashValue = "newSection"; y window.location.hash = hashValue;, el hash de la URL cambia a #newSection sin recargar la página. Este enfoque es útil para navegar dentro de la misma página o vincular a secciones específicas dentro de un documento. Además, la función function updateHash(newHash) encapsula esta funcionalidad, lo que facilita el cambio dinámico de la parte hash de la URL. Ambos scripts proporcionan formas sencillas de modificar la URL y mejorar la experiencia del usuario evitando recargas innecesarias de la página.

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

Explorando métodos adicionales para modificar la URL sin recargar

Otro aspecto de modificar la URL sin recargar la página implica el uso del replaceState() método de la API de Historia. Mientras pushState() agrega una nueva entrada al historial, replaceState() modifica la entrada del historial actual. Esto puede resultar particularmente útil cuando desea cambiar la URL sin saturar el historial del usuario con múltiples estados. Por ejemplo, si tiene una aplicación de una sola página donde el contenido cambia con frecuencia, es posible que desee actualizar la URL para reflejar el estado actual sin agregar cada cambio al historial. Esto mantiene la funcionalidad del botón Atrás limpia y fácil de usar.

Usar replaceState(), puedes escribir una función similar a changeURL() pero en lugar de llamar history.replaceState() dentro de eso. Por ejemplo, function replaceURL(newPath) podría utilizar dieciséis para actualizar la URL. Esta técnica es valiosa para mejorar la experiencia del usuario al mantener la URL sincronizada con el estado de la aplicación sin crear entradas innecesarias en el historial. Además, ofrece una forma más eficiente de gestionar el historial del navegador, especialmente en aplicaciones web dinámicas.