javascript - 如何处理 history.pushState 与内容更改

Question

虽然 Mozilla 有一个易于理解的文档，但它history.pushState并history.replaceState没有告诉我在按下后退按钮和动态更改内容时如何处理内容。

假设 foo.html 有一个表单并执行 AJAX 调用以在提交时替换其内容，那么 pushState 如下所示：

history.pushState({content:$('#content').html()}, '', 'bar.html');

当用户单击后退按钮时，URL 变回 foo.html 但页面不显示表单。如何显示表格？我查看了 popState 但无法使其正常工作。

Answer 1

您需要存储重新渲染旧内容所需的所有状态，然后使用该状态在popstate.

诸如 Knockout.js（或完整的 MVC 框架）之类的模型绑定技术可以使这变得更容易。

Answer 2

所以这就是我为解决它所做的事情：

当 foo.html 加载时，我执行history.replaceState({container:$(#container').html()},'', window.location);

然后在ajax调用替换内容之后，我执行这个：history.pushState({container:$(#container').html()},'', 'bar.html');

在页面加载时，我绑定 popstate 以检查事件是否具有包含容器的状态对象，如下所示：

$(window).bind("popstate", function(event) {
    if (event.state != null){
        if ('container' in event.state){
            $(#container').html(event.state.container);
        }
    }
});