Manipulación de URLs en JavaScript: Añadiendo directorios a dominios existentes
Es usual implementar soluciones prácticas y eficientes para
gestionar y modificar URLs en nuestras aplicaciones web. JavaScript ofrece una serie de herramientas que permiten
la edición de direcciones web de forma dinámica. Dicha habilidad
es indispensable en numerosos escenarios, tales como el desarrollo
de aplicaciones de una sola página (SPA), donde la correcta manipulación
de las rutas garantiza la navegación efectiva sin la necesidad de recargar
la página.
Una tarea común incluye insertar nuevas carpetas o directorios al camino
especificado en la URL. Este proceso puede resultar confuso sin la guía
adecuada. En este artículo, nos enfocaremos en cómo agregar parte de una
ruta a la URL de un dominio ya existente usando JavaScript, lo que también
aplica a la adición de directorios a la ruta actual de la ventana del navegador.
Usando el objeto window.location para la modificación de URLs
Antes de proceder a la explicación detallada, es importante conocer
el objeto window.location. Este objeto contiene información
acerca de la URL actual y tiene métodos que nos permiten interactuar
y modificar dicha URL.
Propiedades del objeto window.location:
- href: la URL completa.
- protocol: el protocolo de la URL (por ejemplo, ‘http:’).
- host: el nombre de host y el puerto (si está presente).
- hostname: el nombre de dominio.
- port: el número de puerto.
- pathname: la parte de la ruta de la URL.
- search: la query string de la URL.
- hash: el ancla de la URL (#).
Para añadir un nuevo segmento a la ruta, utilizaremos principalmente la propiedad
pathname. Esta tarea puede realizarse de diferentes maneras,
según las necesidades específicas del proyecto en curso.
Agregando un directorio a la ruta de una URL
Consideremos el escenario en el que tenemos un dominio como www.ejemplo.com
y deseamos añadirle un directorio como /blog para redireccionar nuestro sitio hacia
www.ejemplo.com/blog. Lo primero que se debe hacer es obtener la ruta actual y luego
añadir el nuevo segmento de directorio.
El siguiente código muestra cómo hacerlo en JavaScript:
window.location.pathname += '/blog';
Sin embargo, debemos tener en cuenta ciertos aspectos. Si solo queremos añadir
el directorio cuando no esté presente en la URL, se hace necesario realizar una
comprobación adicional:
if (!window.location.pathname.includes('/blog')) {
window.location.pathname += '/blog';
}
Es cómodo y seguro realizar una comprobación previa, ya que
permite evitar la duplicación de la misma carpeta en la URL si el código se
ejecuta más de una vez, lo que podría llevar a una dirección no deseada o
inválida.
Consideraciones adicionales al modificar URLs con JavaScript
Modificar la propiedad window.location.pathname puede causar, en
algunos contextos, la recarga de la página y la perdida del estado actual de nuestra
app. Para una aplicación SPA, la cual utilizaría una estructura basada en
JavaScript para controlar las vistas y el flujo de usuario sin
hacer actualizaciones completas de la página, se preferiría el uso del
History API.
La API de History permite manipular el historial de sesión del navegador de una
manera que tenga en cuenta las manipulaciones del estado de la aplicación web.
Añadiendo un directorio a la URL sin recargar con History API:
El método pushState() es útil para agregar o modificar historial sin
cambiar la página actualmente vista. El siguiente fragmento de código añade un
directorio a la URL en cuestión:
var nuevoDirectorio = '/blog';
if (!window.location.pathname.includes(nuevoDirectorio)) {
window.history.pushState({}, '', window.location.href + nuevoDirectorio);
}
Esta es una solución elegante que nos ayuda a mantener la interactividad de
la aplicación sin interferir con la experiencia del usuario.
Resumen de mejores prácticas
Al momento de agregar o modificar URLs con JavaScript, es recomendable seguir algunas prácticas que
asegurarán la eficiencia del código y una mejor experiencia de usuario:
- Realizar comprobaciones para evitar cambios innecesarios en la URL.
- Utilizar el History API para aplicaciones que no requieren actualización completa.
- Asegurarse de que las modificaciones sean válidas y no generen rutas incorrectas.
- Considerar el uso de rutas relativas y absolutas según sea necesario.
Siguiendo estas recomendaciones y comprendiendo los ejemplos de código suministrados, los
desarrolladores estarán un paso más cerca de gestionar de manera óptima las URLs dentro
de sus aplicaciones web y resolver las necesidades de navegación específicas de sus usuarios.