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:
<!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>
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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare i primary constructor di C# per inizializzare le proprietà
Usare le variabili per personalizzare gli stili CSS
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Implementare l'infinite scroll con QuickGrid in Blazor Server
Creare un'applicazione React e configurare Tailwind CSS
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Miglioramenti nell'accessibilità con Angular CDK
Utilizzare Model as a Service su Microsoft Azure
Cambiare la chiave di partizionamento di Azure Cosmos DB
Evitare la command injection in un workflow di GitHub
Inizializzare i container in Azure Container Apps
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
I più letti di oggi
- Vuoi incontrare Bill Gates? Viaggia con ASPItalia.com!
- Customizzare il pager del DataGrid
- Stabilire un collegamento VPN tra una Web App e una Virtual Network
- Documentare ASP.NET Web API con Swagger
- Usare i servizi REST di BING per ottenere informazioni sulla posizione dell'utente
- Visual Studio 2005 CTP May