Question

虽然Mozilla在history.pushState和history.replaceState上有一个easy to understand documentation，但在按下后退按钮并动态更改内容时，它并没有告诉我如何处理内容。

假设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);
        }
    }
});

如何处理带有内容更改的history.pushState

2 个答案: