History API: cambia l’url senza ricaricare la pagina

Autore:  Angelo Iasevoli

Essendo un web developer non riesco a godermi i siti così come fanno tutti gli altri mortali. Mi pongo sempre delle domande:

  • “Come funziona questo?”;
  • “Come posso fare per ottenere le stesse cose?”;
  • “Come posso migliorare queste funzioni?”.

Spesso ne passa di acqua sotto i ponti prima che trovi una risposta. Proprio in queste settimane ho finalmente scovato una soluzione a questa domanda: “Come fa Facebook a cambiare l’URL senza ricaricare l’intera pagina?“.

Se ci fate caso, quando scorrete le foto di un’album o cambiate pagina all’interno di un profilo, noterete che la pagina non viene ricaricata, eppure l’URL si modifica. Tutti sanno che ajax ci viene in contro per cambiare il contenuto di una pagina, ma quanti sanno come cambiare l’URL?

Ansiosi di conoscere la risposta? Vi accontento subito: si tratta di un’API di HTML5, per essere più precisi la “HTML5 History API“.

Immaginate di inviare ad un vostro amico un link ad una foto appena vista in un album. Senza questa API vedrà la sua bacheca principale o cose simili. Comprenderete ora l’importanza di questa nuova funzione introdotta nell’HTML5.

Tutto bello, anzi bellissimo, ma c’è un ma… Cosa fare per browser come le vecchie versioni di Internet Explorer (che dio le abbia in gloria) che non sanno minimamente cosa sia l’HTML5? In questo caso ci viene in soccorso un ottimo plugin disponibile per jQuery, Mootools, Right.js e Zepto. Si chiama History.js.

Come prima cosa, importiamo il plugin inserendo nella pagina queste due stringhe:

<script src="http://balupton.github.com/history.js/vendor/jquery.js"></script>
<script src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>

Per cambiare l’URL sarà necessario utilizzare la funzione:

History.pushState(data,titolo,url);

Dove “titolo” ed “url” sono rispettivamente il titolo della pagina ed il nuovo URL mostrato dal browser, mentre “data” sono informazioni che vogliamo passare (fra poco sarà più chiaro).

In questo modo si creeranno delle task nella cronologia. Cliccando il pulsante del browser per andare nella pagina precedente si ritorna all’URL precedente, ma il contenuto della pagina? Come accorgersi che lo stato (URL e titolo della pagina) è cambiato? Rispondo subito con questa funzione:

    History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
        var Data = State.data;
        var Titolo = State.title;
        var URL = State.url;
    });

Questa funzione va in esecuzione quando lo stato del browser cambia e registra informazioni come “Data” passati in precedenza dalla funzione “History.pushState”, “Titolo” che è il nuovo titolo della pagina e “URL” che è l’URL appena cambiato.

Starà a noi, poi, creare delle funzioni che cambino il contenuto della pagina. Ora si spiega come mai cliccando su una foto su Facebook, si apre una cornice nella pagina stessa, senza ricaricarla, ma se si prova ad andare all’indirizzo indicato dall’URL, si approda in una zona totalmente diversa (quella della foto senza effetto modal).

Ci sono anche altri due siti che conosco e che usano questo sistema: Google+ e GitHub. Ne conoscete altri?

Abbonatevi al feed della sezione Hi-Tech per scoprire altri trucchi simili a questo. ;)