Ves al contingut principal

Objecte location

L'objecte location de JavaScript és una propietat del objecte window (o del objecte document) i representa la ubicació actual (URL) del document que s'està mostrant al navegador. Permet llegir i modificar les diferents parts de l'URL i, per tant, navegar a altres pàgines o recarregar la pàgina actual.

Pots accedir-hi mitjançant window.location o simplement location (ja que window és l'objecte global).

Propietats de location

L'objecte location ofereix diverses propietats de només lectura o lectura/escriptura que permeten accedir a les parts individuals de l'URL. Si modifiques una d'aquestes propietats (excepte hash, search, i pathname en certs contextos), el navegador intentarà navegar a la nova URL.

Suposem que l'URL actual és: https://usuari:contrasenya@www.exemple.cat:8080/caminet/fitxer.html?id=123&nom=prova#seccio1

Propietat Descripció Exemple de Valor Modificable
href Tota l'URL completa. https://usuari:contrasenya@www.exemple.cat:8080/caminet/fitxer.html?id=123&nom=prova#seccio1 ✅
protocol El protocol de l'URL, inclòs el caràcter :. https: ✅
host El nom del host (servidor) i el número de port (si no és el port per defecte). www.exemple.cat:8080 ✅
hostname El nom del host (servidor), sense el port. www.exemple.cat ✅
port El número de port de l'URL. Si no s'especifica, és una cadena buida o el port per defecte (80 per HTTP, 443 per HTTPS). 8080 ✅
pathname El camí (path) de l'URL, que comença amb /. /caminet/fitxer.html ✅
search La cadena de consulta (query string), que comença amb ?. ?id=123&nom=prova ✅
hash El fragment o anclatge de l'URL, que comença amb #. #seccio1 ✅
origin L'origen de l'URL (protocol, host, i port). De només lectura. https://www.exemple.cat:8080 ❌

Mètodes de location

L'objecte location té tres mètodes principals que s'utilitzen per a la navegació i la recàrrega de la pàgina.

Mètode Descripció Efecte
assign(url) Carrega el recurs a l'URL especificat. Afegeix una nova entrada a l'historial de navegació, permetent a l'usuari tornar enrere. És equivalent a assignar un valor a location.href.
replace(url) Carrega el recurs a l'URL especificat. Substitueix l'URL actual a l'historial de navegació, evitant que l'usuari pugui fer servir el botó "Enrere" per tornar a la pàgina anterior.
reload(forceReload) Recarrega el document actual. Recarrega la pàgina des del cau del navegador (per defecte). Si es passa true com a argument (location.reload(true)), força la recàrrega del servidor, ignorant la memòria cau.

Exemples, casos d'ús

 

1. Lectura de l'URL (Obtenir Informació)

Pots utilitzar les propietats per analitzar l'URL actual i extreure'n dades.

JavaScript 
// Si l'URL és: https://localhost:3000/productes/detall.html?sku=P45#reviews

console.log(location.protocol);  // Resultat: "https:"
console.log(location.hostname);  // Resultat: "localhost"
console.log(location.port);      // Resultat: "3000"
console.log(location.pathname);  // Resultat: "/productes/detall.html"
console.log(location.search);    // Resultat: "?sku=P45"
console.log(location.hash);      // Resultat: "#reviews"

// Cas d'ús: Obtenir un paràmetre de consulta (cal una petita lògica addicional o usar URLSearchParams)
const urlParams = new URLSearchParams(location.search);
const sku = urlParams.get('sku');
console.log(sku); // Resultat: "P45"

2. Navegació i Redirecció

Redirecció standard (assign o href)

Afegeix l'URL a l'historial. L'usuari pot tornar a la pàgina anterior.

JavaScript 
// Mètode 1: Assignar a href
location.href = 'https://www.novaweb.cat/inici';

// Mètode 2: Usar el mètode assign() (equivalent)
location.assign('https://www.novaweb.cat/inici');

// Cas d'ús: Redireccionar l'usuari després d'una acció (ex: login)
if (usuariHaFetLogin) {
    location.href = '/dashboard';
}

Redirecció sense historial (replace)

S'utilitza per evitar que l'usuari torni a la pàgina anterior, per exemple, després d'un formulari de login o una pàgina de càrrega temporal.

JavaScript 
// La pàgina actual (ex: login.html) serà reemplaçada a l'historial pel dashboard.
location.replace('/dashboard'); 

// Cas d'ús: Evitar que l'usuari torni a la pàgina de login després d'entrar.

3. Recàrrega de pàgina (reload)

Per refrescar la pàgina actual.

JavaScript 
// Recàrrega normal (pot usar el cau del navegador)
location.reload(); 

// Recàrrega forçada (ignora el cau, forçant una nova petició al servidor)
location.reload(true);

// Cas d'ús: Actualitzar una llista de dades després d'esborrar un element.

4. Modificació de part de l'URL

Pots canviar components individuals per recarregar la pàgina a la mateixa base, però amb un nou valor.

JavaScript 
// Canviar el hash per anar a una altra secció de la mateixa pàgina
location.hash = 'contacte'; 
// L'URL canvia i el navegador es desplaça al nou anclatge, sense recarregar.

// Canviar la cadena de consulta per filtrar contingut
location.search = '?filtre=actiu&ordre=asc'; 
// El navegador recarregarà la pàgina amb la nova query string.

// Canviar el camí (pathname)
location.pathname = '/nous-productes'; 
// El navegador recarregarà la pàgina amb el nou camí.

Amunt