添加到浏览器历史记录而不重新加载页面

Question

基本上,我有一个包含表单的页面.当用户提交该表单时,将调用Javscript函数并向用户动态显示新表单.

此时,我希望用户能够单击浏览器的后退按钮并返回到第一个表单.这可能吗？

---

感谢您的快速回复,但我无法让pushState工作.单击后退按钮后,HTML仍显示"第二个表单".

这是我用来测试它的代码:

<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>

Answer 1

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

与文档相关的链接.

Answer 2

我使用History.js完成了HTML5历史/状态API的类似行为,如下所述:

为所有HTML5浏览器提供交叉兼容的体验(它们都有点不同地实现HTML5历史记录API,导致不同的行为,有时还有错误 - History.js修复了这一点,确保在整个HTML5浏览器中体验符合预期/相同/优秀)

例:

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