Nella lezione precedente, abbiamo visto cosa è l'oggetto window e come utilizzarlo per recuperare informazioni sulla dimensione dello schermo.
In questa lezione, vediamo come recuperare informazioni sulle pagine e come eseguire reindizzamenti a nuove pagine utilizzando window.location in JavaScript.
Cosa è window.location
L'oggetto window.location può essere utilizzato per recuperare le informazioni sull'URL di una pagina, ricaricare una pagina o reindirizzare ad una nuova pagina.
Anche in questo caso, window può essere sottinteso.
alert(location); // Risultato: intero URL della paginaNell'esempio, viene visualizzato l'intero URL della pagina.
Lista dei metodi e delle proprietà
Vediamo la lista dei metodi e delle proprietà disponibili con window.location.
| Proprietà / Metodo | Descrizione |
location.href | Restituisce l'URL completo della pagina o reindirizza ad una nuova pagina. |
location.pathname | Restituisce la cartella dove è inserita la pagina. |
location.hostname | Restituisce il dominio della pagina. |
location.replace() | Rimpiazza l'URL della pagina con uno specificato. Non è possibile tornare indietro alla pagina precedente. |
location.assign() | Reindirizza l'utente ad una pagina specificata. |
location.reload() | Ricarica la pagina. |
Vediamo questi metodi e proprietà in dettaglio.
La proprietà location.href
L'attributo location.href restituisce l'URL completo della pagina corrente. Possiamo anche utilizzare questo attributo per caricare una nuova pagina assegnandogli un nuovo URL.
alert(location.href); // Risultato: URL completo della pagina
location.href = "example.com"; // Reindirizzamento alla pagina example.comLa proprietà location.pathname
L'attributo location.pathname restituisce la parte specifica del percorso della pagina nel server. Quindi, ci consente di ottenere il percorso della pagina senza il dominio.
Ad esempio, supponiamo di essere in https://biadets.com/language/javascript/.
alert(location.pathname); // Risultato: "/language/javascript/"La proprietà location.hostname
L'attributo location.hostname ci permette di ottenere il dominio della pagina corrente. Ad esempio, biadets.com.
alert(location.hostname); // Risultato: "biadets.com"Il metodo location.replace()
Il metodo location.replace() viene utilizzato per caricare una nuova pagina e sostituire la pagina corrente nella cronologia del browser. Questo impedisce all'utente di tornare indietro alla pagina precedente utilizzando il pulsante "Indietro".
location.replace("https://www.example.com/");Il metodo location.assign()
Il metodo location.assign() ci consente di caricare una nuova pagina assegnandogli un nuovo URL. A differenza di location.replace(), questo metodo aggiunge una nuova pagina nella cronologia del browser, consentendo all'utente di tornare indietro alla pagina precedente.
location.assign("https://www.example.com/");Il metodo location.reload()
Il metodo location.reload() può essere utilizzato per ricaricare la pagina corrente.
location.reload();