Codice

Come gestire il pulsante Indietro con JavaScript

Uno dei principali problemi con le applicazioni basate su JavaScript è che interrompono il pulsante Indietro. Se si aggiorna il contenuto della pagina con JavaScript invece di caricare una nuova pagina dal server, nessuna voce inserita è nella cronologia del browser; quindi, quando l'utente fa clic su Indietro, in attesa di tornare allo stato precedente, si posiziona invece sul sito precedente.

Il trascinamento è un ottimo modo per gli utenti di interagire con le tue applicazioni web. Ma i guadagni di usabilità andranno persi se, dopo aver passato del tempo a passare attraverso l'applicazione, gli utenti fanno clic sul pulsante Indietro aspettandosi di tornare indietro e tornare alla loro schermata Start. In questo articolo "Ciao! L'autore di HTML5 e CSS3 Rob Crowther ti mostra come utilizzare l'API di cronologia HTML5 per evitare quel destino.

Il problema può essere dimostrato semplicemente. Tutto ciò che serve è una funzione che aggiorna la pagina in risposta all'attività dell'utente: 

var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

e un po 'di markup: 

Click Me
Recorded 0 clicks

Nella vita reale, la tua pagina web farebbe qualcosa di più complicato, come prelevare nuovi contenuti dal server tramite AJAX, ma un semplice aggiornamento è sufficiente per dimostrare il concetto. Vediamo cosa succede quando l'utente visita la pagina.

  1. L'utente inizia sulla sua home page e decide di visitare la fantastica applicazione Click Me di cui hanno sentito parlare.
  2. Digitano l'URL o seguono un link da un'e-mail per accedere alla pagina Click Me.
  3. Dopo alcuni secondi di piacevole interazione, lo stato della pagina è cambiato diverse volte.
  4. Ma quando l'utente fa clic sul pulsante Indietro nel browser, scoprono che invece di tornare a uno stato di pagina precedente, salta alla loro home page.

La funzione doclick () può essere aggiornata per sfruttare l'API della cronologia. Ogni volta che la pagina viene aggiornata, imposta anche location.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. L'utente arriva alla pagina Click Me come prima.
  2. Si noti che ora l'URL viene aggiornato dopo ogni clic: "#" è apparso alla fine di esso.
  3. Facendo clic sul pulsante Indietro ora la posizione torna al numero 2, a dimostrazione che gli stati della pagina sono stati aggiunti correttamente alla cronologia. Ricorda però che facendo clic sul pulsante Indietro non si riporta automaticamente la pagina al suo stato precedente.

Aggiornamento dello stato della pagina

L'aggiornamento della cronologia è solo una parte del problema; devi anche essere in grado di aggiornare lo stato della pagina in modo che corrisponda allo stato nella cronologia.

Poiché sei tu a gestire la cronologia, tocca a te gestire lo stato della pagina. Per aggiornare la tua pagina in risposta a location.hash modificata, puoi ascoltare l'evento hashchange: 

function doclick() {times++;location.hash = times;}window.onhashchange = function() {if (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} else {times = 0;}document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

La funzione doclick () è ora responsabile solo dell'aggiornamento della variabile times e della modifica dell'hash. L'evento hashchange è sull'oggetto della finestra; quando ha luogo, controlli che l'hash esista. In una vera applicazione, vorresti anche controllare che abbia un valore valido. Successivamente, si imposta il valore di volte in cui deve essere il numero nell'hash. Infine, si aggiorna il documento per riflettere lo stato corretto della pagina. Diamo un'occhiata a questo nuovo codice:

  1. Come prima, l'hash nell'URL viene aggiornato quando l'utente fa clic.
  2. Ma ora, quando si fa clic sul pulsante Indietro, la funzione onhashchange viene attivata e lo stato della pagina viene reimpostato per corrispondere all'URL.

Utilizzando location.hash

La proprietà location.hash e l'evento hashchange associato sono utili se si desidera taggare determinate viste della propria applicazione e consentire all'utente di navigare tra di esse. Google Mail utilizza questo approccio consentendo di navigare tra la tua casella di posta (#inbox), i contatti (#contatti) e altre visualizzazioni: se hai un account Gmail, guarda cosa succede all'URL mentre navighi su varie pagine e quindi fare clic indietro.

Ma per quanto riguarda le informazioni di stato, l'hash consente solo di memorizzare una stringa. Potresti codificare un oggetto più complesso, ma l'URL diventerebbe rapidamente lungo e ingombrante e non sarebbe memorabile per i tuoi utenti. Se hai bisogno di informazioni più complesse memorizzate come parte della cronologia, un approccio migliore sarebbe utilizzare l'hash come chiave per estrarre ulteriori informazioni di stato da qualche archivio. Sebbene tu possa seguire il tuo approccio, HTML5 ha fornito un'API per farlo per te attraverso il metodo history.pushState () e l'evento popstate. Questi metodi ti consentono di salvare e ricaricare un oggetto complesso.

Sommario

Hai imparato che la gestione della cronologia del browser ti consente di agire in modo più ragionevole nel contesto dell'applicazione, mentre l'API dei microdati ti consente di accedere a informazioni semantiche strutturate nei contenuti della pagina.

Quali usi prevedi per questa tecnica? Hai sviluppato un metodo diverso? Fateci sapere nei commenti.

Immagine in primo piano / miniatura, torna indietro via Shutterstock.

applicazioni javascript tasto indietro ciao html5 & css storia api rob rofrowther