Dall'archivio script > HTML5

Gestire la navigazione del browser con la History API di HTML5

di Andrea ColaciAndrea Colaci,

La History API di HTML5 consente di avere un maggior controllo della navigazione, questo vantaggio è indispensabile in scenari in cui i contenuti sono renderizzati dinamicamente nella pagina.

Se l'utente clicca sul tasto "indietro" del browser, si aspetterà di vedere lo "stato" precedente della pagina anzichè la pagina/url di provenienza. E' opportuno quindi intervenire manipolando la sessione di navigazione, mediante l'oggetto history con cui è possibile:

  • pilotare il browser con i metodi back, forward e go

  • manipolare la sessione di navigazione con il metodo pushState

  • sottoscrivere gli eventi inerenti la navigazione, ad esempio onpopstate



Nell'esempio seguente, viene dimostrato come manipolare la sessione di navigazione, gestendo l'evento onpopstate (tasto "indietro" del browser), inserendo con pushstate url "fittizi", che saranno visibili nella barra degli indirizzi e fornendo infine un titolo contestuale ai contenuti renderizzati dinamicamente nella pagina:

HTML
<!DOCTYPE html>
<html lang="en">
  <head> 
    <meta charset="utf-8"/>
    <title>HTML5 history api</title>
  </head>
  <body>
    <h1>History API</h1>
    abilita gestione history<input id="historyEnabled" type="checkbox"/>
    <dl>
      <dd><a id="link1" href="#" data-brand="Aston-Martin">Aston Martin</a></dd>
      <dd><a href="#" data-brand="Bentley">Bentley</a></dd>
      <dd><a href="#" data-brand="Ferrari">Ferrari</a></dd>
      <dd><a href="#" data-brand="Infinity">Infinity</a></dd>
      <dd><a href="#" data-brand="Maserati">Maserati</a></dd>
      <dd><a href="#" data-brand="Lamborghini">Lamborghini</a></dd>
      <dd><a href="#" data-brand="Lotus">Lotus</a></dd>
      <dd><a href="#" data-brand="Pagani">Pagani</a></dd>
      <dd><a href="#" data-brand="Porsche">Porsche</a></dd>
    </dl>
    <h3>sei nel brand: <i><label id="lblbrand"></i></label></h3>
  </body>
</html>

Javascript
function showCars(brand){

  //Simuliamo il popolamento dinamico di un template
  document.querySelector("#lblbrand").innerHTML=brand;
}

function manageClick(lnk)
{
    //salvo il brand visitato
    var brand = lnk.dataset.brand;

    if(document.querySelector("#historyEnabled").checked)
      history.pushState(lnk.dataset.brand, "Modelli " + brand + " 2012", "/2012/brands/" + brand);
  
    showCars(lnk.dataset.brand);
}

window.onload= function(){

    //gestione evento click
    var links = document.querySelectorAll("a");

    for (var i = 0; i < links.length; i++) {
        links<i>.addEventListener("click", function (event){
        manageClick(this);
        event.preventDefault();}, false);

    onpopstate = function(event){
        if(event.state !== null)
            showCars(event.state);}    
};

La specifica completa è disponibile qui: http://www.w3.org/TR/html5/history.html

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi