使用AJAX / jQuery加载页面和history.pushState（）方法保留浏览器“后退”按钮function

我想通过AJAX（jQuery load方法）加载页面并通过history.pushState方法将URL推送到浏览器栏时保留后退按钮function。 单击浏览器后退按钮时出现问题，第一次单击仅恢复以前的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()的function。

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 hashtags。