Le history API Javascript per muoversi tra la cronologia di navigazione del Browser

Giorgio Borelli

Leggere e modificare a cronologia di navigazione del Browser è molto semplice sfruttando le history API Javascript. L'oggetto history ottenibile come proprietà di window mette a disposizione tutte le funzioni Javascript necessarie per muoverci tra la cronologia di navigazione, come history.back() e history.go() per andare indietro e  avanti tra le pagine. A mezzo le history API Javascript, implementare bottoni e link per tornare alla pagina precedente o andare ad una determinata pagina della cronologia di navigazione del browser diventa un giochetto da ragazzi, andiamo a scoprire come fare.

Implementare un torna indietro via Javascript

Per realizzare questa funzionalità basta usare la funzione history.back() ed implementarla ad esempio come link sfruttando l'evento onclick

<a href="#" onclick="javascript:history.back();return false">Torna indietro</a>

Oppure potremmo realizzare la stessa cosa con un button

Implementare un vai avanti in Javascript

E se invece di voler tornare indietro volessimo andare avanti? Basta usare la funzione history.forward() ed implementarla sempre come link cliccabile all'evento onclick

<a href="#" onclick="javascript:history.forward();return false">Vai avanti</a>

Saltare nella cronologia di navigazione con Javascript

E se invece di una volessimo tornare indietro di due o più pagine? Nessun problema, in javascript useremo la history.go() ed andremo a scrivere  così

//torniamo indietro di due pagine
<a href="#" onclick="javascript:history.go(-2);return false">Torna indietro di due pag.</a>

In questo caso sfruttiamo la funzione go dell'oggetto history, che accetta come parametro un intero che indica a quale pagina della cronologia di navigazione riferirci, quindi possiamo spostarci in avanti ed indietro tra le pagine navigate proprio come i bottoni del browser. Ovviamente history.go(-1) corrisponde a history.back(), mentre history.go(1) corrisponde history.forward().

Andare ad una pagina specifica della cronologia di navigazione

Meno conosciuta è la possibilità di specificare come parametro della history.go() una stringa rappresentante l'url della pagina a cui vogliamo andare, in questo modo:

<a href="#" onclick="javascript:history.go("www.mio-url.com");return false">Vai a &laquo;</a>

ATTENZIONE: Questa sintassi non è standard, e viene riconosciuta solo da Internet Explorer, mentre non funziona su Mozzilla o Chrome e pertanto non è cross browser. Per completezza l'ho citata ma ve ne sconsiglio fortemente l'uso.

Conoscere il numero di pagine presenti nella cronologia

Per avere il numero di pagine presenti nella cronologia di navigazione del nostro browser non ci resta che usare la proprietà length presente in molti oggetti Javascript, ed in questo caso anche in quello history, quindi basta scrivere così:

alert(history.length);

 

Aggiungere o rimuovere pagine alla cronologia di navigazione

Vi sono altre due funzioni molto importanti delle history API Javascript, precisamente history.pushState() e history.replaceState() , rispettivamente per aggiungere e modificare una pagina della cronologia di navigazione, entrambe accettano tre parametri: Il numero della pagina, il titolo della pagina e l'url. Nel caso della pushState il numero di pagina indicherà il punto in cui inserire la nuova voce.

 

Se qualcuno volesse invece porre qualche domanda o approfondire l'argomento su come sfruttare la cronologia di navigazione del browser via Javascript può farlo liberamente tramite i commenti, ogni intervento alla discussione sarà gradito.

Categorie: Browser | Javascript

Tags:

Pingbacks and trackbacks (1)+

Aggiungi Commento

biuquote
  • Commento
  • Anteprima
Loading