Popstate - vorbei geknallt Zustand der event-handler -

Dem folgenden code sollte dazu führen, dass eine Warnung der '1', sondern Sie tut nichts.

window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1})
history.back()

Fiddle: http://jsfiddle.net/WNurW/2/

Irgendwelche Ideen?

InformationsquelleAutor Lyn Headley | 2013-07-23
  1. 12

    Ihren code woudn nicht dazu führen, dass ein popstate, als die pushstate Befehl gibt an, auf welcher Seite Sie sind auf JETZT.

    window.onpopstate = function(event) { alert(event.state.a) }
history.pushState({a: 1});
history.pushState({a: 2});
history.back()

    Den oben genannten code funktioniert.

    Hier das fiddle: http://jsfiddle.net/WNurW/8/

    Popstate - vorbei geknallt Zustand der event-handler -

    Wie Sie sehen können auf dem Bild oben:

    (1) Sie Hier auf der Seite, oder die Geige, Sie wollen dann pushState, die eine neue Verknüpfung zu der Geschichte Kette.

    (2), Wenn Sie drücken Sie Zustand, die Sie hinzufügen eine mehr zurück auf auf die Geschichte, aber es wird auch bewegen Sie den aktuellen Ort in der "Geschichte" bis zu Ihrem neuen Staat. So gehen wir zurück, wird Ihnen nicht die Geschichte der Staat Sie denken, dass Sie erhalten, wird es geben, die vorherigen.

    (3) Sie haben zu gehen, um eine "neue" Seite, oder drücken Sie eine andere Geschichte Stand, in der Lage sein zu gehen zurück an den Staat, die Sie erstellt in Schritt (2).

    • Tolle Erklärung, Liebe das Diagramm!
    • Der andere Punkt, den ich machen würde ist, dass das Ereignis.Staat übergeben zu popstate ist nicht der Zustand, den wir einfach spontan aus, aber die neu installierten Zustand.
    InformationsquelleAutor André Snede Kock
  2. 5

    In der Bestellung geltenden trigger-Ereignis braucht man navigiert zwischen zwei Einträge für das gleiche Dokument, und nennen richtige Geschichte-Methode.

    Aufruf Geschichte.pushState() oder Geschichte.replaceState() nur, es nicht löst popstate Veranstaltung. Überprüfen Sie auch, ob die history.pushState() params.

    So können Sie es tun:

    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)

    Hier etwas aufwendiger 🙂

    <!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>
    InformationsquelleAutor felipsmartins
  3. 0

    Sie ändern müssen, um den aktuellen Zustand vor dem drücken eines neuen Staates. Also wenn Sie wieder für den ersten Zustand, Sie erhalten die Daten zurück:

    //updating the current state    
window.history.replaceState({a: 1}, "First State", window.location.pathname);
//setting the new state
window.history.pushState({ },"Secound State", window.location.pathname);
//getting the data back
window.onpopstate = (event) => {
  alert(event.state.a); //Displays "1";
}
    InformationsquelleAutor Maikon Matheus
Schreibe einen Kommentar