Il seguente codice dovrebbe causare un avviso di "1", ma invece non fa nulla.Popstate - passaggio dello stato di popping al gestore di eventi
window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1})
history.back()
Fiddle: http://jsfiddle.net/WNurW/2/
Tutte le idee?
Il codice woudn't causare un popstate, come il comando pushState dice ciò che la pagina si è in ADESSO.
window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1});
history.pushState({a: 2});
history.back()
Il codice sopra funzionerà.
Heres il violino: http://jsfiddle.net/WNurW/8/
Come si può vedere dalla foto qui sopra:
(1) Qui immesso nella pagina, o il violino, poi si desidera pushState, che sarà aggiungi un nuovo link alla cronologia.
(2) Quando si preme lo stato, si aggiungerà un altro clic indietro alla cronologia, ma si sposterà anche la posizione corrente nella "cronologia" fino al nuovo stato. Quindi, tornando indietro, non ti darà lo stato della storia che pensi di aver ottenuto, ma darà quello precedente.
(3) È necessario passare a una "nuova" pagina o premere un altro stato di cronologia, per poter tornare allo stato creato nel passaggio (2).
Per forzare l'evento di trigger è necessario navigare tra due voci di cronologia per lo stesso documento e chiamare il metodo di cronologia corretta.
Chiamando history.pushState() o history.replaceState() solo, non attiverà l'evento popstate. Inoltre, controlla i parametri history.pushState().
Così si può farlo:
window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1}, "")
history.back() //add history entry
history.back() //add history entry
history.go(1)
Qui qualcosa di più elaborato :)
<!DOCTYPE html>
<html>
<head>
<title>page</title>
</head>
<body>
<script type="application/x-javascript">
function changeState(){
history.pushState({page: 1}, "page title", "?page=1");
history.pushState({page: 2}, "other title ", "?page=2");
//replaceState: Updates the most recent entry on the history stack
history.replaceState({page: 3}, "title 3", "?page=3");
history.back();
history.back();
history.go(2);
}
function showState(event){
var restultState = JSON.stringify(event.state)
alert("location: " + document.location + ", state: " + restultState);
}
window.onpopstate = showState;
changeState();
</script>
</body>
</html>
Grande spiegazione, amo lo schema! –
L'altro punto che vorrei fare è che event.state passato a popstate non è lo stato che abbiamo appena fatto scattare, ma lo stato appena installato. –