Introdotto dopo Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 introduce due metodi, histtory.pushState() e history.replaceState(), che permettono l'aggiunta e la modifica di entità storica. Allo stesso tempo, questi metodi funzionano con l'evento window.onpostate.
Modifica il referrer usando il metodo history.pushState(), che può essere usato nell'intestazione http creata per l'oggetto xmlhttpRequest dopo che lo stato è stato modificato. Questo referrer sarà l'URL del documento quando è stata creata la XMLHttpRequest.
pushState viene usato per aggiungere una registrazione della pagina corrente alla storia, mentre replaceState e pushState sono usati esattamente allo stesso modo, l'unica differenza è che viene usato per modificare la registrazione della pagina corrente nella storia.
esempio
Supponiamo che http://mozilla.org/foo.html pagina eseguisca JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "pagina 2", "bar.html");
Questo metodo farà apparire la barra degli indirizzi URL http://mozilla.org/bar.html,Ma il browser non carica bar.html pagina, anche se esiste。
Ora supponiamo ancora una volta che l'utente continui ad accedere al http://google.com e clicchi indietro. In questo momento, la barra degli indirizzi URL, http://mozilla.org/bar.html, la pagina riceverà un evento popstate (chrome), che conterrà una copia di stateObj. Questa pagina sembra foo.html. +
A questo punto, clicchiamo di nuovo indietro, e l'URL si trasforma http://mozilla.org/foo.html,document riceverà un altro evento popstate e un oggetto null state. Questa azione di ritorno non cambia il contenuto del documento. (Forse dopo un po' proverà a caricarsi...) chrome)
Metodo pushState
pushState() ha tre parametri: oggetto stato, titolo (ora ignorato, non gestito), URL (opzionale). Dettagli:
· oggetto stato – L'oggetto stato è un oggetto Javascrip{filter}t che si collega a una nuova entità storica creata dal metodo pushState(). Usate per memorizzare informazioni sulle voci che vuoi inserire nella cronologia. L'oggetto Stato può essere qualsiasi stringa Json. Poiché Firefox utilizza l'hard disk dell'utente per accedere all'oggetto di stato, lo spazio massimo di archiviazione di questo oggetto è di 640k. Se è maggiore di questo valore, il metodo pushState() lancia un'eccezione. Se hai bisogno di più spazio per conservare, usa lo storage locale.
· titolo—Firefox ignora questo parametro ora, anche se potrebbe essere utilizzato in futuro. Il modo più sicuro per usarlo ora è passare una corda vuota per evitare modifiche future. Oppure puoi usare un titolo breve per indicare lo stato
· URL - Questo parametro viene usato per passare l'URL della nuova entità storica, si noti che il browser non caricherà questo URL dopo aver chiamato il metodo pushState(). Ma magari dopo un po' cercherà di caricare questo URL. Ad esempio, dopo che l'utente riavvia il browser, il nuovo URL può non essere un percorso assoluto. Se è un percorso relativo, allora sarà relativo all'URL esistente. Il nuovo URL deve essere co-dominio con l'URL esistente, altrimenti pushState() lancerà un'eccezione. Questo parametro è opzionale e, se vuoto, verrà posizionato come URL corrente del documento.
In un certo senso, chiamare il metodo pushState() è molto simile a impostare window.locatio{filter}n = "#foo", entrambi creano e attivano un'altra entità storica associata al documento corrente, ma pushState() ha alcuni vantaggi aggiuntivi:
Il nuovo URL può essere qualsiasi URL che si trovi nello stesso dominio dell'URL attuale, a differenza di window.locatio{filter}n che rimane nello stesso documento se viene impostato solo l'hash.
L Puoi lasciare l'URL intatto se non necessario. Per confronto, imposta window.locatio{filter}n = "#foo"; Si generano solo nuove entità di cronologia, se il tuo hash attuale non è #foo
Puoi associare dati arbitrari alla tua nuova entità storica. Con un approccio basato su hash, tutti i dati rilevanti devono essere codificati in una stringa breve.
Si noti che il metodo pushState() non fa sì che avvenga il tempo di cambio hash, anche se gli URL vecchio e nuovo sono solo hash diversi.
metodo replaceState()
history.replaceState() viene usato molto come pushState(), tranne per il fatto che replaceState() viene usato per modificare l'entità di storia corrente invece di crearne una nuova. Questo metodo può talvolta essere utile quando è necessario aggiornare un oggetto stato o l'entità storia corrente in risposta a un certo comportamento dell'utente, e puoi usarlo per aggiornare l'URL dell'oggetto stato o dell'entità cronologia corrente.
Evento popstate
Quando l'entità storica viene modificata, avverrà l'evento popstate. Se l'entità storia è generata dai metodi pushState e replaceState, l'attributo stato dell'evento popstate conterrà una copia dell'oggetto stato dall'entità storia
Vedi window.onpopstate per i dettagli
Leggi lo stato attuale
Leggi lo stato esistente
Quando la pagina si carica, può avere un oggetto di stato non vuoto. Questo può accadere quando la pagina imposta un oggetto stato (usando pushState o replaceState) e l'utente riavvia il browser. Quando la pagina si ricarica, riceverà un evento onload, ma non ci sarà un evento popstate. Tuttavia, se leggi la proprietà history.state, otterrai questo oggetto stato dopo che l'evento popstate si verifica
Documentazione di History.pushState(): https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Il parametro dell'URL ricevente è di tipo string, che viene usato per modificare l'URL della barra di indirizzi corrente. Una cosa da notare è che questo parametro non può essere lo stesso di cross-domain, cioè il protocollo, il nome di dominio e la porta devono essere gli stessi.
DOMExcezione non catturata: Non è stato eseguito 'pushState' su 'History': Un oggetto stato di storia con URL 'http://www.test.com/' non può essere creato in un documento con origine ' https://www.itsvse.com' e URL 'https://www.itsvse.com/'.
a <anonymous>:1:9
Codice corretto:
|
Pubblicato su 12/09/2017 13:55:04
|
|
|
|
Pubblicato su 27/10/2017 09:51:10