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

Question

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

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

其中 get_page_content() 是我用来在单击 link 时获取和替换页面内容的函数。这就是我在 get_page_content():

中使用 pushstate 的方式

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

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

Answer 1

我刚刚意识到我在 get_page_content() 中有 window.history.pushState('', '', url);，然后每次触发 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) {
  // ...
}

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

History pushstate back & forward functionality

javascript

ajax

wordpress

browser-history

pushstate