Riscrivere l’url di una pagina dinamicamente usando JavaScript senza ricaricare la pagina.
Quando si sviluppano delle pagine web che utilizzano JavaScript per modificare il contenuto visualizzato, asseconda di come l’utente interagisce con la pagina, in particolare quando si utilizzano le funzionalità di AJAX, spesso ci si trova davanti al problema che l’utente, ad un certo punto della sua interazione, vorrebbe in qualche modo un riferimento alla pagina nel suo stato corrente, per poterla salvare così com’è in un dato momento, ad esempio nei preferiti.
Normalmente ciò non è possibile perchè l’url della pagina è sempre lo stesso anche se il contenuto della pagina cambia nel tempo.
Sarebbe opportuno dunque in questi casi, modificare l’url visualizzato nella barra degli indirizzi, lato client, ovvero senza ricaricare la pagina, inserendo nell’url delle variabili che indicano lo stato corrente della pagina.
Per capire meglio il problema facciamo un’esempio pratico:
Abbiamo una pagina che visualizza una serie di immagini (diapositive) in sequenza.
Il passaggio da una immagine all’altra è comandato dall’utente, quando l’utente clicca su un pulsante viene visualizzata la diapositiva successiva.
La visualizzazione delle immagini viene effettuata da JavaScript senza mai ricaricare la pagina.
Supponiamo che la pagina in questione si trovi all’indirizzo: www.sitoqualsiasi.it/diapositive.php
Quando l’utente clicca sul pulsante viene visualizzata l’immagine successiva ma l’url nella barra degli indirizzi rimane sempre www.sitoqualsiasi.it/diapositive.php
Arrivato alla diapositiva numero 57 l’utente decide di voler salvare la pagina nei preferiti perchè pensa che quella foto è bellissima. Dunque salva la pagina ma ahimè l’indirizzo salvato è sempre il solito www.sitoqualsiasi.it/diapositive.php, dunque quando accederà alla pagina dei preferiti dovà nuovamente scorrere tutte le foto fino alla 57 per trovare quella che gli piace.
Ciò che può venire in mente di fare è modificare il valore window.location.href con javascript e inserire una variabile che indichi il numero della diapositiva attuale facendo diventare l’url qualcosa del genere: ww.sitoqualsiasi.it/diapositive.php?num_diapositiva=57
Tuttavia ciò non è possibile perchè se modifichiamo il valore di window.location.href la pagina viene ricaricata e noi non vogliamo che ciò accada.
In alternativa possiamo usare il valore di window.location.hash Cosi facendo il browser non ricaricherà la pagina. Verrà solamente aggiunto in coda all’url la stringa contenuta nella variabile window.location.hash preceduta dal simbolo cancelletto #.
Nel nostro caso potremmo mettere nella variabile semplicemente il numero che indica la diapositiva corrente. In questo modo quando l’utente arriva alla diapositiva che gli piace l’url sarà www.sitoqualsiasi.it/diapositive.php#57
Dunque basterà far si che al caricamento della pagina venga visualizzata la diapositiva indicata dalla variabile window.location.hash oppure la prima diapositiva nel caso in cui la variabile non contenga un numero valido.
Tuttavia il caso preso in esame e molto semplice, inquanto è necessaria una sola variabile.
Nel caso in cui ci servano più variabili possiamo costruire una stringa che contenga delle coppie nome_variabile=valore_variabile separate da E commerciale come si fa con le variabili da utilizzare lato server. Questa stringa dovrà poi essere processata, al caricamento della pagina, da JavaScript per estrarre i valori delle variabili.
Un esempio di questa tecnica lo possiamo vedere nelle pagine delle mappe del sito www.panoramio.com
Come possiamo notare, quando muoviamo la mappa, le coordinate nell’url nella barra degli indirizzi cambiano, senza tuttavia che la pagina venga mai ricaricata.
Foto aggiunte su Google Earth
