Ajax / HTML5历史状态(popState, pushState等)-后退按钮行为

Ajax / HTML5 history states (popState, pushState, etc) - back button behavior

本文关键字：按钮 pushState HTML5 历史状态 popState Ajax      更新时间：2023-09-26

关于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，然后再次按回进入page2。浏览器不会显示第二页，而是只显示我们之前检索到的page2内容的ajax结果，这样页面的其余部分就不会被加载。如何解决这个问题?

谢谢你的帮助!

您的问题1:

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

我刚刚遇到了和你的问题2相同的问题。

你可以发送HTTP报头来阻止web浏览器缓存和显示XHR内容。在执行历史对象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");
相关文章：