English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Metodi di utilizzo dell'API di cronologia HTML5, esempio di esempio online che dimostra come utilizzare l'API di cronologia HTML5, compatibilità del browser, definizione della sintassi e dettagli sui valori delle proprietà.
L'API di cronologia HTML5 consente di accedere alla cronologia di navigazione del browser tramite JavaScript. L'API di cronologia HTML5 è molto utile nelle applicazioni web singole pagina. Le applicazioni web singole pagina possono utilizzare l'API di cronologia HTML5 per rendere uno stato specifico "marcato" all'interno dell'applicazione. Più avanti, tornerò a come utilizzare l'API di cronologia per creare uno stato marcatore nelle applicazioni web singole pagina.
La cronologia di navigazione è composta da una serie di URL. Ogni volta che l'utente naviga all'interno dello stesso sito, l'URL della nuova pagina viene messo in cima alla pila. Quando l'utente clicca sul pulsante "Indietro", il puntatore nella pila si sposta al precedente elemento nella pila. Se l'utente clicca di nuovo sul pulsante "Avanti", il puntatore si muove verso l'elemento più alto della pila. Se l'utente clicca su "Indietro" e poi su un nuovo link, l'elemento più alto della pila verrà sovrascritto con il nuovo URL.
Ecco un esempio di pila della cronologia storica:
http://myapp.com/great-new-story.html http://myapp.com/news.html http://myapp.com
L'ultima pagina visitata nella pila della cronologia storica è http://myapp.com/great-new-story.html. Se l'utente clicca sul pulsante "Indietro", il puntatore nella pila della cronologia storica tornerà a http://myapp.com/news.html. Se l'utente clicca sul pulsante "Avanti", il puntatore della pila della cronologia storica si muoverà a http://myapp.com/great-new-story.html, ma se l'utente clicca su un altro link (sulla pagina http://myapp.com/news.html), l'URL del link sovrascriverà http://myapp.com/news.html nella pila della cronologia storica.
L'API di cronologia HTML5 consente alle applicazioni web di accedere alla pila della cronologia storica.
L'API di cronologia HTML5 consente alle pagine web di accedere solo a una parte della cronologia di navigazione, che si trova nello stesso dominio della pagina stessa. Per motivi di sicurezza, questa limitazione nell'API della cronologia è necessaria, quindi le pagine web non possono vedere quali altri siti l'utente ha visitato.
Allo stesso modo, l'API di cronologia HTML5 non consente alle pagine web di spingere URL nella pila della cronologia storica che non si trovano nello stesso dominio. Questa limitazione garantisce che quando l'utente inizia a digitare una pagina web, la pagina non può fingere di aver trasmesso l'utente a siti come Paypal e spiare il nome utente / password.
Puoi accedere alla cronologia di navigazione tramite l'oggetto history, che può essere utilizzato come oggetto globale in JavaScript (è in realtà window.history).
L'oggetto history contiene le seguenti funzioni - tra cui l'API cronologia:
back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)
La funzione back() riporta la cronologia alla pagina precedente dell'URL. Il chiamare back() ha lo stesso effetto di cliccare il pulsante "Indietro" del browser.
La funzione forward() muove la cronologia di navigazione alla pagina successiva della cronologia. Il chiamare forward() ha lo stesso effetto di cliccare il pulsante "Avanti" del browser. Puoi chiamare questa funzione solo se back() è stato chiamato o se si ha cliccato il pulsante "Indietro". Se la cronologia indica l'URL più recente della cronologia di navigazione, non c'è direzione di avanzamento.
La funzione go(index) può muoversi indietro o avanti nella cronologia storica in base all'indice passato come parametro alla funzione go(). Se si chiama go() con un indice negativo (ad esempio go(-1)), il browser tornerà alla cronologia. Se si passa un indice positivo alla funzione go(), il browser si muoverà avanti nella cronologia (ad esempio go(1)). L'indice indica il numero di passi da avanzare o retrocedere nella cronologia di navigazione, come 1, 2, -1, -2 ecc.
La funzione pushState(stateObject, title, url) aggiunge un nuovo URL allo stack di cronologia. Questa funzione ha tre parametri. Il parametro url è l'URL che viene aggiunto allo stack di cronologia. Il parametro title è spesso ignorato dal browser. Lo stateObject è l'oggetto che viene passato con l'evento quando un nuovo URL viene aggiunto allo stack di cronologia. Puoi inserire qualsiasi tipo di dati nello stateObject. È semplicemente un oggetto JavaScript.
La funzione replaceState(stateObject, title, url) funziona in modo simile alla funzione pushState() ma sostituisce l'elemento corrente dello stack di cronologia con un nuovo URL. L'elemento corrente non è necessariamente l'elemento più importante. Questo è l'elemento attualmente puntato, che può essere qualsiasi elemento nello stack, se sono stati chiamati i metodi back(), forward() e go() dell'oggetto history.
Ora vediamo alcuni esempi su come utilizzare l'API di cronologia HTML5.
Prima di tutto, vediamo come utilizzare le funzioni back() e forward() per muoversi avanti e indietro nella cronologia:
history.back(); history.forward();
Ricordatevi che l'oggetto history si trova all'interno dell'oggetto window, quindi potete scrivere anche:
window.history.back(); window.history.forward();
Ma dato che l'oggetto window è l'oggetto predefinito, può essere omesso. Nel resto di questa guida, ignorerò l'oggetto.
Ricordatevi che non potete spostarvi nella cronologia a meno che non torniate indietro (o che l'utente lo faccia).
Ora vediamo come utilizzare la funzione go() per eseguire azioni simili a back() e forward(). Prima di tutto, questo è il passo indietro che utilizzate per navigare indietro nella cronologia:
history.go(-1);
Per spostarsi di due passi indietro, potete passare come parametro al funzione go() il valore -2, come mostrato di seguito:
history.go(-2);
Allo stesso modo, per far avanzare la cronologia, potete passare un indice positivo alla funzione go(). Ecco due esempi di un passo avanti e due passi in avanti nella cronologia:
history.go(1); history.go(2);
Naturalmente, se eseguite entrambe queste righe contemporaneamente, la cronologia del browser si sposterà di complessivi 3 passi avanti.
Per spingere lo stato nello stack degli storici, chiamare la funzione pushState() dell'oggetto history. Ecco un esempio di pushState():
var state = {};
var title = "";
var url = "next-page.html";
history.pushState(state, title, url);In questo esempio, il nuovo URL viene spinto nello stack degli storici. Questo cambierà anche il campo URL dell'indirizzo del browser, ma non farà sì che il browser tenti di caricare l'URL.
La funzione replaceState() sostituisce l'elemento history attualmente puntato nello stack degli storici. Se l'utente ha utilizzato il pulsante "Indietro" per tornare alla cronologia, questo potrebbe non essere l'elemento più importante. Ecco un esempio di replaceState():
var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);Anche la sostituzione dello stato cambia l'URL nel campo dell'indirizzo del browser, ma non provoca il caricamento dell'URL. La pagina con l'URL sostituito rimane nel browser.
L'API cronologia HTML5 permette alle pagine web di ascoltare i cambiamenti nella cronologia del browser. Si applicano anche le limitazioni di sicurezza, quindi non vengono notificate alla pagina web le modifiche alla cronologia che causano un URL al di fuori del dominio della pagina.
Per ascoltare i cambiamenti nella cronologia del browser, impostare un ascoltatore su onpopstate sull'oggetto window. Ecco un esempio di ascoltatore di eventi cronologici del browser:
window.onpopstate = function(event){
console.log("Cambiamento della cronologia: " + document.location.href);
}La funzione di gestione degli eventi onpopstate viene chiamata ogni volta che c'è un cambiamento nella cronologia del browser sulla stessa pagina (cronologia del browser, pagina spinta nella pila degli storici). La reazione agli eventi di modifica della cronologia potrebbe essere estrarre parametri dall'URL e caricare il contenuto corrispondente nella pagina (ad esempio, tramite AJAX).
Attenzione: solo i cambiamenti che causano un qualsiasi "indietro" o "avanti" pulsante, o le funzioni di navigazione storica corrispondenti back(), forward() e go() faranno scattare l'ascoltatore di eventi onpopstate. La chiamata alle funzioni pushState() e replaceState() non scatenerà eventi di modifica della cronologia.
Quando si spinge un nuovo URL nella pila degli storici, l'URL nel campo dell'indirizzo del browser viene sostituito con il nuovo URL. Tuttavia, il browser non tenta di caricare l'URL. Solo viene visualizzato l'URL e spinto nella pila, come se il browser avesse visitato la pagina, ma la pagina con lo stato nuovo viene mantenuta nel browser.
Inviare il nuovo URL alla pila degli storici è un metodo utile per rendere uno stato specifico aggiungibile come segnalibro in un'applicazione a pagina singola (SPA). Ad esempio, in un negozio online a pagina singola, l'URL dell'applicazione potrebbe essere:
http://myshop.com
L'applicazione potrebbe essere in grado di visualizzare i prodotti nella stessa pagina, ma come fa l'utente a inviare a un amico un link verso un prodotto specifico?
La soluzione è, quando si carica un nuovo prodotto, l'applicazione a pagina singola invia il nuovo URL alla pila degli storici. Questo non provoca il caricamento del nuovo URL, ma rende il nuovo URL visibile nel campo dell'indirizzo del browser. Da qui può essere aggiunto come segnalibro o copiato e incollato in e-mail e altro. Ecco un esempio dell'aspetto di questo URL aggiungibile come segnalibro:
http://myshop.com?productId=234
O forse un URL più leggibile:
http://myshop.com/products/234
O forse una versione leggermente più complessa di REST (che menziona anche il tipo di prodotto):
http://myshop.com/products/books/234
Dopo aver spinto l'URL nella cronologia del browser, la pagina del negozio web caricherà il prodotto corrispondente tramite AJAX e lo mostrerà all'utente.
Se l'utente fa clic sul pulsante "Indietro", l'evento onpopstate chiamerà il gestore degli eventi. Poi, la pagina web dovrebbe verificare quale è il nuovo URL e, se l'URL è tornato, caricare la homepage del prodotto o dell'applicazione corrispondente http://myshop.com.
Questo è un esempio di codice HTML5 che spiega il principio di caricare dati nel browser utilizzando AJAX:
<a href="javascript:push('http://myshop.com/books/123');">
Book 123
</a> <br/>
<a href="javascript:push('http://myshop.com/apps/456');">
App 456
</a>
<script>
function loadUrl(url) {
console.log("Caricamento dei dati dall'URL: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("La cronologia è cambiata in: " + document.location.href);
loadUrl(document.location.href);
}
</script>Questo esempio include due link con ascoltatori di click JavaScript. Dopo aver fatto clic su uno dei link, l'URL corrispondente viene spinto nella pila della cronologia e caricato nel browser.
Questo esempio include anche un ascoltatore di eventi onpopstate. Quando l'utente fa clic sui pulsanti "Indietro" o "Avanti", questo ascoltatore di eventi caricherà qualsiasi URL visualizzato nel campo dell'indirizzo del browser.
Se l'utente fa clic sul link e sui pulsanti "Indietro" / "Avanti", il esempio visualizzato in precedenza avrà effetto. Ma cosa succede se l'utente invia l'URL a un amico o lo aggiunge come segnalibro e lo visita più tardi?
Se l'utente tenta di accedere a un URL etichettato, http://myshop.com/books/123, il browser richiederà tale URL al server web. Il server web deve sapere che deve inviare indietro la stessa applicazione a pagina singola http://myshop.com. Dovrai configurare il server web per eseguire questa operazione.
Analogamente, le applicazioni web a pagina singola devono verificare l'URL utilizzato durante il primo caricamento e utilizzare quell'URL per determinare il contenuto da caricare e visualizzare. Pertanto, se l'applicazione a pagina singola ha caricato l'URL, myshop.com/books/123, questa deve caricare e visualizzare il prodotto corrispondente. Questa verifica dell'URL deve essere effettuata durante l'inizializzazione dell'applicazione a pagina singola.
Al momento della scrittura di questo articolo, tutti i browser moderni (IE, Safari, Chrome, Firefox) supportano l'API di Cronologia HTML5, ad eccezione di Opera Mini.