Ajax / HTML5 历史状态（popState、pushState 等） - 后退按钮行为答案

【问题标题】：Ajax / HTML5 history states (popState, pushState, etc) - back button behaviorAjax / HTML5 历史状态（popState、pushState 等） - 后退按钮行为
【发布时间】：2013-05-20 11:02:16
【问题描述】：

有几个关于 HTML5 的 pushState 功能的问题，但我无法找到关于我遇到的两个问题的任何信息。我的popstate 处理程序定义如下：

$(window).bind('popstate', function (e) {
    if (!e.originalEvent.state)
        return;

    LoadContent({ url: e.originalEvent.state.path });
}

LoadContent 调用只是使用 ajax 填充内容窗格。

问题 1： 假设我们从我的网站的page1 开始浏览它。 LoadContent 不会被调用，因为没有 state。假设我的浏览历史是这样的：

page1 -> (ajax)page2 -> (ajax)page3 -> (back pressed)page2 -> (back pressed)page1

当我按下浏览器的返回按钮转到page2 时，一切正常。但是，当我再次按下返回时，应该会加载 page1 的内容，e.originalEvent.state 为 null，这意味着不会调用 LoadContent，因此内容将与 @987654332 上的内容相同@。按下返回时如何让page1 的内容加载？

问题 2： 假设我们从page3 向后压到page2，这意味着我们通过 ajax 加载第二页的内容。现在想象一下，我们再次浏览（即手动将 URL 放入浏览器的地址栏中）到page3，然后然后再次按下返回到page2 .浏览器不会显示第二页，而是仅显示我们之前检索到的page2 内容的ajax 结果，因此不会加载页面的其余部分。如何解决这个问题？

感谢您的帮助！

【问题讨论】：

标签： javascript ajax html browser-history pushstate

【解决方案1】：

对于您的问题 1：

您需要重新加载整个页面或通过 ajax 将其加载回来，因为初始页面中的数据不会被推送到历史记录。或者您可以更改页面加载事件以从 ajax 加载数据并动态加载内容，然后您将拥有需要推送到历史记录的必要 json 数据。

【讨论】：

【解决方案2】：

我刚刚遇到了与您的问题 2 相同的问题。

您可以发送 HTTP 标头以防止 Web 浏览器缓存和显示 XHR 内容。在执行 History 对象 JS 的页面上执行此操作。

在 PHP 中：

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

【讨论】：