使用AJAX / jQuery加載頁面和history.pushState（）方法保留瀏覽器“后退”按鈕功能

Question

我想通過AJAX（jQuery load方法）加載頁面並通過history.pushState方法將URL推送到瀏覽器欄時保留后退按鈕功能。 單擊瀏覽器后退按鈕時出現問題，第一次單擊僅恢復以前的URL但不加載上一頁。

到目前為止，這是我的代碼：

$(function(){
  var profile_url= "/profile";
   $('#click_button').click(function(){
      $('#main_content').load(profile_url);
      history.pushState({profile:profile_info}, "profile", profile_url);
   });
});

我的問題是，有沒有辦法在第一次單擊后退按鈕時將上一頁的AJAX加載到#main_content div中？

任何幫助/建議將不勝感激。

Answer 1

我想引導大家到一個名為PJAX的jQuery插件，它完成了我最終有興趣提出這個問題。 Pjax（）結合了jQuery AJAX和pushState來加載頁面並保留瀏覽器歷史記錄。

這是代碼 ，這里有一個很好的pjax() 演示 。

它非常好用且易於使用，在演示中，只需記住單擊復選框即可幫助演示pjax()的功能。

Answer 2

為此，您需要訂閱'popstate'事件。

在導航到會話歷史記錄條目時，在某些情況下會觸發popstate事件。 HTML5規范

你可以這樣做：

window.onpopstate = function() {
  $('#main_content').load(location.href)
};

Answer 3

您可以使用popstate事件來實現此目的。 有關詳細信息，請參閱https://developer.mozilla.org/en/DOM/window.onpopstate 。

另請查看History.js ，它提供了一個包裝器，如果瀏覽器不支持歷史記錄API，則可以回退到url主題標簽。