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，此处为pjax() pjax()。{/ p>

它真的很棒且易于使用，在演示中，只需单击复选框即可帮助演示{{1}}的功能。

Answer 2

为此，您需要订阅'popstate'事件。

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

你可以这样做：

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

Answer 3

您可以将popstate事件用于此目的。有关详细信息，请参阅https://developer.mozilla.org/en/DOM/window.onpopstate。

另请查看提供包装器的History.js，如果浏览器不支持历史记录API，则可以回退到url hashtags。

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

3 个答案: