javascript - 添加到浏览器历史记录而无需重新加载页面

Question

基本上，我有一个包含表单的页面。当用户提交该表单时，会调用一个 JavaScript 函数，并且会动态地向用户呈现一个新表单。

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

---

感谢您的快速回复，但我无法让 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 History/State API 完成了类似的行为，如下所述：

为所有 HTML5 浏览器提供交叉兼容的体验（它们都实现了 HTML5 History API 略有不同，导致不同的行为，有时甚至是错误 - History.js 修复了这个问题，确保整个 HTML5 浏览器的体验与预期的一样/相同/很棒）

例子：

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