使用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);
   });
});

我的问题是,有没有办法#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)
};