A la hora de desarrollar un proyecto para la web, es fundamental entender cómo interactuar con el navegador. Por ello, se ha creado el concepto de BOM, un sistema con métodos y propiedades que nos permiten acceder o manipular datos del navegador. En este post, te enseñaremos qué es y cómo funciona su propiedad window.location, ideal para interactuar con los datos de la URL de una página web.
¿Qué es la propiedad window.location?
La propiedad window.location es una de las propiedades que se despliegan del concepto de Browser Object Model, también conocido como BOM. En este sentido, es una propiedad que nos permite interactuar con el navegador, particularmente con las características de la ubicación actual del documento.
De manera general, la propiedad window.location es de solo lectura. Es decir, nos devuelve un objeto Location con detalles de la ubicación del documento. Sin embargo, también se puede asignar un string como valor a esta propiedad, lo que alterará la ubicación del documento.
¿Cómo funciona la propiedad window.location?
La propiedad window.location nos permite modificar algunos detalles de la ubicación del documento a partir de distintos métodos pertenecientes al objeto Location. A continuación, te enseñamos cuáles son y cómo funcionan.
.assign
Este método nos permite asignar un nuevo valor a la ubicación del documento. En este sentido, puede usarse para navegar a una nueva página en determinado momento de nuestro código. Sin embargo, también se puede ejecutar esta misma acción sin el método, simplemente asignando un nuevo valor a una instancia del objeto Location o al comando de la API.
A continuación, te mostramos un ejemplo de este comportamiento:
window.location.assign («https://youtube.com»);
window.location = «https://youtube.com»
.reload
Este método nos permite forzar la recarga de la página actual desde el servidor o desde nuestro código. Para ello, basta con aplicar el método sobre una nueva instancia del objeto Location o directamente sobre la propiedad window.location.
window.location.reload
.replace
El método replace de la propiedad window.location, al igual que el método assign, nos permite redirigir a una nueva ubicación pasándole una nueva URL. Sin embargo, este método hará que la página original no se guarde en el historial de la sesión, por lo que el usuario no podrá regresar con los botones del navegador.
Además de redirigir una ruta, este método puede usarse para añadir un valor en la URL actual de nuestro documento, con lo que se redirige dentro de la misma aplicación.
.href
Al igual que assign, este método nos permite modificar la URL actual del navegador por la que queramos. La diferencia principal entre estos dos métodos de modificación es que, mientras que assign es una función que recibe una URL como parámetro, el comando window.location.href funciona como una propiedad que debe igualarse a la URL.
window.location.assign («https://youtube.com»);
// vs
window.location.href = «https://youtube.com»;
En este orden de ideas, el uso de una u otra manera de redirigir una ruta dependerá del desarrollador web que escriba esta línea de código. Mientras algunos prefieren declarar una función (.assign) para reconocer que un proceso está corriendo, otros prefieren utilizar la propiedad (.href) por temas de performance en la web, pues acceder a una propiedad es más rápido que acceder a una función.
Si quieres aprender cómo utilizar este método, te invitamos a leer nuestro post sobre redirigir una ruta con window.location. Además, si quieres conocer más ejemplos sobre el uso de esta propiedad, te recomendamos leer el artículo sobre window.location en Mozilla Developer Network.
¿Quieres seguir aprendiendo?
Tras leer este post, sabes exactamente qué es y cómo funciona la propiedad window.location. Sin embargo, ¡todavía queda mucho por aprender sobre el mundo del desarrollo web! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás los conceptos, lenguajes, patrones y herramientas fundamentales para convertirte en un experto de este mundo. ¿A qué esperas para ser un desarrollador web profesional? ¡Inscríbete ya y dale un impulso a tu vida!
