Controllo della navigazione: history e location

L'oggetto window del browser ci fornisce anche alcuni meccanismi per gestire e controllare la navigazione dell'utente: history, per tenere traccia della navigazione e location che ci permette di gestire l'URL corrente. In questa lezione le esaminiamo entrambe.

history

La proprietà history è un oggetto che tiene traccia delle pagine visitate dall'utente all'interno di una finestra durante una sessione di navigazione. Grazie a questo oggetto possiamo conoscere il numero di pagine visitate dall'utente accedendo alla proprietà length e possiamo andare avanti e indietro nell'elenco delle pagine visitate sfruttando rispettivamente i metodi forward() e back().

Ad esempio, la seguente istruzione carica la pagina precedentemente visitata dall'utente:

window.history.back();

Per posizionarci direttamente su una specifica pagina nella storia delle pagine visitate dall'utente possiamo utilizzare il metodo go(). Nel seguente esempio carichiamo la terzultima pagina visitata dall'utente:

window.history.go(-3);

Ne consegue che le seguenti istruzioni sono equivalenti:

window.history.back();
window.history.go(-1);

location

Per controllare l'URL del documento caricato nella finestra corrente utilizziamo la proprietà location. Questa proprietà è un oggetto che ci permette di sezionare gli elementi che compongono l'URL del documento, consentendoci di ricavare:

• il nome del server
• la porta HTTP eventualmente utilizzata
• i parametri eventualmente passati e altre informazioni.

Per spiegare le varie informazioni che possiamo recuperare tramite le proprietà dell'oggetto location, prendiamo in considerazione questo URL:

http://www.html.it:8080/articoli/articolo.php?id=123#paragrafo

Nella seguente tabella riportiamo i risultati ottenuti accedendo alle diverse proprietà dell'oggetto location quando la pagina caricata è quella corrispondente all'URL specificato:

Espressione	Risultato
window.location.href	http://www.html.it:8080/articoli/articolo.php?id=123#paragrafo
window.location.protocol	http:
window.location.hostname	www.html.it
window.location.host	www.html.it:8080
window.location.origin	http://www.html.it:8080
window.location.port	8080
window.location.pathname	/articoli/articolo.php
window.location.search	?id=123
window.location.hash	#paragrafo

Esaminiamo ora un esempio di utilizzo pratico delle proprietà dell'oggetto location:

function getParameters() {
	var paramData = [];
	var parameters = {};
	var param;
	if (window.location.search.length > 0) {
		paramData = window.location.search.split("?")[1].split("&");
		for(var i = 0; i < paramData.length; i++) {
			param = paramData[i].split("=");
			parameters[param[0]] = param[1];
		}
	}
	return parameters;
}

In questo esempio abbiamo definito una funzione che restituisce i parametri presenti nell'URL della pagina corrente. La funzione accede alla proprietà search dell'oggetto location e genera un oggetto con proprietà corrispondenti ai nomi dei parametri. In corrispondenza di un URL analogo al seguente:

https://www.html.it/articoli/articolo.php?id=123&x=567

otterremo quindi un oggetto come questo:

{id: 123, x: 567}

L'accesso alle proprietà dell'oggetto location non è però in sola lettura. Possiamo impostare dinamicamente le varie parti dell'URL ed ottenere di conseguenza la navigazione ad un altro URL. Ad esempio, la seguente istruzione cambia la pagina corrente:

window.location.href = "http://www.html.it";

Possiamo ottenere lo stesso effetto dell'istruzione precedente utilizzando il metodo assign() dell'oggetto location:

window.location.assign("http://www.html.it");

L'oggetto location prevede anche il metodo reload() per ricaricare la pagina corrente. Normalmente la pagina viene caricata dalla cache, anche se ciò dipende dalle impostazioni del browser. Se vogliamo forzare il caricamento dal server possiamo passare il valore true come parametro:

window.location.reload(true);

Il metodo replace(), infine, consente di caricare un nuovo documento al posto di quello attualmente presente nella finestra corrente:

window.location.replace("http://www.html.it");

A differenza di assign(), però, questo metodo sostituisce anche il vecchio documento presente nella history. In altre parole, utilizzando replace() non avremo più traccia del vecchio documento nella history del browser.