Ajouter à l'historique du navigateur sans recharger la page

En gros, j'ai une page qui contient un formulaire. Lorsqu'un utilisateur soumet ce formulaire, Javascript fonction est appelée et l'utilisateur est présenté de façon dynamique avec une nouvelle forme.

À ce point, ce que je voudrais, c'est pour que l'utilisateur puisse cliquer sur le bouton de retour du navigateur pour revenir à la première forme. Est-ce possible?

Merci pour les réponses rapides, mais j'ai de la difficulté à obtenir pushState de travail. Le HTML s'affiche toujours "deuxième forme" après avoir cliqué sur le bouton de retour.

Voici le code que j'ai utilisé pour tester:

<script>
function newPage(){
    history.pushState({state:1}, "State 1", "?state=1");
    document.getElementById('formBox').innerHTML="second form";
}
</script>


<input type="button" onclick="newPage();" value="forward" />
<div id='formBox'>first form</div>

source d'informationauteur twiz

  1. 22
    var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

    Pertinentes lien vers les docs.

  2. 14

    J'ai accompli le même comportement avec le HTML5 Histoire/État de l'Api, à l'aide de History.jsdécrit ainsi:

    Fournir une croix-compatible pour tous les Navigateurs HTML5 (ils ont tous
    mettre en œuvre le HTML5 Histoire de l'API un peu différemment causant
    des comportements différents et, parfois, des bugs - History.js corrige ce
    s'assurer que l'expérience est comme prévu /le même /toute
    les navigateurs HTML5)

    Exemple:

    History.pushState({state:1}, "State 1", "?state=1");