Javascript “保存浏览器”；“后退”；使用AJAX/jQuery加载页面和历史记录的按钮功能。pushState（）方法

在通过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中

---

任何帮助/建议都将不胜感激。

为此，您可以使用

popstate

事件。有关详细信息，请参阅

---

另外，还可以查看哪个提供了包装，并且在浏览器不支持历史api的情况下可以回退到url哈希标记。

为此，您需要订阅“popstate”事件

在某些情况下，导航到会话历史记录条目时会触发popstate事件。

你可以这样做：

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

---

我想向大家介绍一个名为PJAX的jQuery插件，它完成了我最终感兴趣的问题。Pjax（）将jQuery AJAX和pushState结合起来，用于页面加载和保存浏览器历史记录

这里是，这里是一个正在运行的

pjax（）

---

它非常好用，在演示中，只需记住点击复选框即可帮助演示

pjax（）

的功能。

只是一件小事-

Var

必须是

Var

。谢谢pimvdb！刚刚编辑了这个问题，-蒂姆·安东，谢谢，这正是我需要的！现在我意识到浏览器的“前进”按钮怎么样了？有没有办法用jQuery load（）方法来控制它？当我在单击后退按钮后单击前进按钮时，毫不奇怪，它不会重新加载我刚刚导航离开的页面，谢谢，-timpopstate在按下前进按钮时也会触发。嗨，安东，如何区分后退按钮和前进按钮？如果用户单击“上一步”或“下一步”，您是否可以执行某种if（）/或者其他操作？谢谢-对于将来偶然发现这一点的人，PJAX现在有一个名为

PJAX:popstate

的事件。它是jQuery的一个很棒的插件！！非常感谢。演示链接断开