Share
La storia è sempre interessante, no? Nelle versioni precedenti di HTML, avevamo un controllo limitato sulla cronologia del browser. Potremmo andare avanti e indietro usando i metodi disponibili, ma era così
Con l'API della cronologia HTML5, abbiamo più controllo sulla riproduzione della cronologia del browser. Ad esempio, abbiamo un modo per aggiungere una voce nella cronologia o modificare l'URL nella barra degli indirizzi senza aggiornare la pagina.
In questo articolo, scopriremo perché l'API della cronologia HTML5 è nata. Prima che esistesse questa API, spesso usavamo valori hash per modificare il contenuto della pagina, in particolare per le pesanti applicazioni a singola pagina, perché la modifica dell'URL non era possibile senza aggiornare la pagina. Inoltre, quando si modifica il valore di hash per un URL, non vengono apportate modifiche alla cronologia del browser.
Ora, tuttavia, entrambe queste cose sono disponibili con l'API di cronologia HTML5 e rendono possibile sviluppare applicazioni pesanti a singola pagina con script senza dover utilizzare i valori hash. Ci consente anche di creare applicazioni in modo SEO-friendly. Inoltre, questa tecnica ci consente di ridurre la larghezza di banda, ma come?
In questo articolo, svilupperemo un'applicazione a pagina singola con questa API per dimostrarlo esattamente.
Ciò significa che caricheremo tutte le risorse necessarie sul caricamento della prima pagina. Da lì in poi, l'applicazione scaricherà solo i contenuti richiesti. In altre parole, invece di caricare tutte le risorse tutte le volte, caricherà solo le risorse richieste da una seconda richiesta di contenuto.
Si noti che è necessario eseguire alcune codifiche sul lato server per fornire solo risorse parziali invece di contenuti di pagine complete.
Al momento della stesura di questo articolo, il supporto del browser per l'API della cronologia HTML5 è abbastanza buono. Possiamo rivedere il suo stato qui. Questo collegamento ti darà un'idea dei browser supportati, ma è sempre buona norma rilevare il supporto per una particolare funzionalità prima di utilizzarla.
Per determinare a livello di programmazione se il tuo browser supporta l'API, controlla la seguente riga di codice:
ritorno !! (window.history && history.pushState);
Inoltre, suggerirei di prendere questo articolo per individuare il supporto per varie funzionalità HTML5.
Se stai usando Modernizr, dovresti usare il seguente codice:
if (Modernizr.history) // History API Supported
Se il tuo browser non supporta l'API di cronologia, puoi utilizzare i polyfill di history.js.
HTML5 offre due nuovi metodi:
Accentsconagua
history.pushState () history.replaceState ()Entrambe ci permettono di aggiungere e aggiornare lo stato della cronologia, rispettivamente. Entrambi funzionano allo stesso modo e prevedono lo stesso numero di parametri. Oltre a questi metodi, abbiamo popstate evento. Vedremo più avanti in questo articolo per come e quando usarlo popstate evento.
pushState e replaceState entrambi si aspettano lo stesso numero di parametri che sono come sotto:
stato può memorizzare una stringa JSON e sarà disponibile per popstate evento.titolo un parametro è ignorato dalla maggior parte dei browser per ora, quindi è meglio impostarlo su nullo per oggi.url può rappresentare qualsiasi URL. Sarà aggiornato con l'indirizzo del browser e non gli interesserà se tale URL esiste o meno. Ancora più importante, non ricaricherà la tua pagina web.Le principali differenze tra questi metodi sono che il pushState aggiungerà una nuova voce nello stack cronologia e replaceState sostituirà corrente il valore della cronologia invece di aggiungerne uno nuovo. Se sei ancora confuso in entrambi questi metodi, dimostriamo lo stesso caso con un esempio migliore.
Supponiamo di avere pile di due blocchi etichettati 1 e 2 e di avere il blocco etichettato 3 nella tua mano. Ora, quando ci esibiamo pushState, il blocco 3 verrà aggiunto a uno stack esistente in modo che lo stack abbia 3 blocchi.
Ora assumere lo stesso stack con due blocchi e uno in più nella tua mano. Quando ci esibiamo replaceState, prenderà il blocco 2 fuori pila e posizionerà il blocco 3. Quindi il numero dei valori della cronologia rimarrà lo stesso. pushState, d'altra parte, aumenta la storia conta per uno.
L'immagine qui sotto mostra la stessa dimostrazione.
Finora, abbiamo coperto il pushState e replaceState eventi per controllare la cronologia del browser, ma supponiamo di avere una varietà di cronologia falsa che abbiamo incluso nel browser. L'utente può o non può reindirizzare a quella pagina. In tal caso, si verificherà un problema quando l'utente preme il pulsante avanti e indietro del browser per navigare nelle pagine della cronologia.
Anche se puoi aspettarti popstate essere licenziato quando il pushState o replaceState i metodi sono indirizzati, ma in realtà non è così. Anziché, popstate si attiva quando si naviga attraverso la voce della cronologia di sessione, premendo i pulsanti indietro o avanti o usando il pulsante history.go o history.back metodi.
Nei browser WebKit, un evento popstate verrebbe attivato dopo l'evento onload del documento, ma Firefox e IE non hanno questo comportamento.
- Casa
- Di
- Contatto
Fai clic sui link sopra per vedere l'utilizzo dell'API della cronologiapushStatemetodo.Casa!
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione.
In questa demo, sperimenterai che le voci della cronologia vengono conteggiate nel browser e puoi navigarci attraverso il pulsante Indietro / Avanti del browser. Visualizza la demo
In questa demo, sperimenterai che le voci della cronologia sono state aggiornate nei browser e che non puoi navigare attraverso il pulsante Indietro / Avanti del browser. Visualizza la demo
Questa API ha creato un grande impatto su come funziona la nostra applicazione web. Ha rimosso la dipendenza dai valori hash negli URL per semplificare la creazione di un'applicazione a pagina singola efficiente, ottimizzata per SEO.
È davvero una bella API, no??
