Question

关于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，因此内容将保持不变在page2上。如何在按下时加载page1的内容？

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

感谢您的帮助！

Answer 1

对于你的问题1：

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

Answer 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");

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

2 个答案: