歷史推送狀態后退和前進功能

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) {
  // ...
}