历史推送状态后退和前进功能

Question

我刚刚制作了一个网站，其中所有页面都使用 ajax 加载。 现在我正在尝试使后退和前进浏览器按钮工作。 后退按钮非常简单，我所要做的就是：

$(window).on('popstate', function(e) {
    get_page_content(location.href);
});

其中get_page_content()是我用来在单击链接时获取和替换页面内容的函数。 这就是我在get_page_content()使用 pushstate 的方式：

window.history.pushState('', '', url);

他们的问题是每当我回去时前进按钮不可用。 如何使用前进按钮？

Answer 1

我刚刚意识到我有window.history.pushState('', '', url); 在get_page_content() ，每次onpopstate事件触发时onpopstate调用它，最终没有任何进展。 我只是将pushState移到get_page_content()之外，一切正常。 这是我目前拥有的：

$('body').on('click', 'a:not([href^="#"])', function(e) {

  if ( this.host === window.location.host ) {

    e.preventDefault()

    get_page_content($(this).attr('href'));
    window.history.pushState('', '', url);

  }

});

$(window).on('popstate', function(e) {

    get_page_content(location.href);

});

function get_page_content(url) {
  // ...
}