javascript - 保留浏览器“后退”按钮功能，使用 AJAX/jQuery 加载页面和 history.pushState() 方法

Question

我想在通过 AJAX（jQueryload方法）加载页面并通过该方法将 URL 推送到浏览器栏时保留后退按钮功能history.pushState。当单击浏览器后退按钮并且第一次单击仅恢复上一个 URL 但不加载上一个页面时，会出现此问题。

到目前为止，这是我的代码：

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

我的问题是有没有办法#main_content在第一次单击后退按钮时将上一页的 AJAX 加载到 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，它提供了一个包装器，并且可以在浏览器不支持 history api 的情况下回退到 url hashtags。