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

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 用于页面加载和保存浏览器历史记录。

这是 the code , 这是一个 nice demo pjax() 的实际应用。

它真的很棒而且易于使用，在演示中，只需记得单击那里的复选框以帮助演示 pjax() 的功能。