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

Posted 2023-02-21

【中文标题】添加到浏览器历史记录而无需重新加载页面

【英文标题】：Add to browser history without page reload

【发布时间】：2012-05-19 11:04:47

【问题描述】：

基本上，我有一个包含表单的页面。当用户提交该表单时，将调用一个 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>

【参考方案1】：

我使用 HTML5 History/State API 完成了类似的行为，使用 History.js，如下所述：

为所有 HTML5 浏览器（它们都 实现 HTML5 History API 有点不同导致 不同的行为，有时还有错误——History.js 修复了这个 确保体验符合预期/相同/自始至终 HTML5 浏览器）

例子：

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

【讨论】：

这是原生 JS 功能，不需要库。

同意，但是 historyjs 非常好用

这似乎是正确的答案，但我对单击后退按钮后如何恢复原始表单有点困惑。当我点击“返回”时，它会停留在页面上，但第二个表单仍然存在。

你在第一个参数中存储你喜欢的任何数据，object 到 History.pushState 函数。在处理状态更改的代码中，您需要使用此信息手动将页面恢复到之前的状态。

【参考方案2】：

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

相关link to the docs。

【讨论】：

如果您不介意它在旧浏览器中中断，这很好。

@MichaelRobinson（但主要是为找到此答案的未来开发人员）目前应该将此类功能视为一个很好的补充，以提供更好的用户体验。没有后退选项的不便不会破坏站点，并且可以实现后备，例如 beforeunload 事件。随着浏览器的发展，这应该是正确的答案，因为它是原生 javascript。

我知道它来自文档，与您编写它的方式相同，但是您知道 stateObj 有什么影响吗？ foo: 和 "bar" 的用途是什么？

@Luke stateObj 可以包含您想要的任何内容。当您使用history.back()、history.forward() 或history.go(target)（其中target 是整数或完整/部分url），或者如果用户使用浏览器的后退按钮，那么您可以访问该stateObj .例如。 window.onpopstate = function(event) alert(JSON.stringify(event.state));developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

Elliot，我认为您还需要将@Buttle 的评论添加到您的答案中。他们两个一起帮助了我。