preserving浏览器＆QUOT;返回]使用AJAX / jQuery的加载页面和history.pushState方法按钮功能（） [英] preserving browser "back" button functionality using AJAX/jQuery to load pages and history.pushState() method

问题描述

我想，当加载通过AJAX（jQuery的负荷法）的网页，并通过推动网址到浏览器栏以preserve后退按钮功能 history.pushState 方法。当一个人点击浏览器后退按钮和1号点击只恢复了previous网址，但不加载previous页面出现问题。

下面是我的code到目前为止：

  $（函数（）{
  VAR PROFILE_URL =/个人资料;
   $（'＃click_button）。点击（函数（）{
      $（'＃main_content'）负载（PROFILE_URL）。
      history.pushState（{简介：profile_info}，配置文件，PROFILE_URL）;
   }）;
}）;
 

我的问题是有没有办法做到的后退按钮的第一次点击一个AJAX负荷previous页进 #main_content DIV？

任何帮助/建议将不胜AP preciated。

解决方案

我想直接给大家一个jQuery插件叫做PJAX它完成了我在问这个问题最终感兴趣。 Pjax（）结合了jQuery的AJAX和pushState的页面加载和preserving浏览器历史记录。

下面的的code ，这里是一个的 pjax好看的演示（）的行动。

这是真正伟大的，易于使用，在演示中，只记得要点击哪一个是有帮助展示 pjax（）的功能。

I'd like to preserve the back button functionality when loading pages via AJAX (jQuery load method) and pushing the URL to the browser bar via the history.pushState method. The problem occurs when one clicks on the browser back button and the 1st click only restores the previous URL but does not load the previous page.

Here's my code so far:

$(function(){
  var profile_url= "/profile";
   $('#click_button').click(function(){
      $('#main_content').load(profile_url);
      history.pushState({profile:profile_info}, "profile", profile_url);
   });
});

My question is is there any way to do an AJAX load of the previous page into the #main_content div on the 1st click of the back button?

Any help/advice would be greatly appreciated.

解决方案

I'd like to direct everyone to a jQuery plugin called PJAX which accomplishes what I was ultimately interested in asking this question. Pjax() combines jQuery AJAX and pushState for page loading and preserving browser history.

Here's the code, and here's a nice demo of pjax() in action.

It is really great and easy to use, in the demo, just remember to click the checkbox which is there to help demonstrate pjax()'s functionality.

这篇关于preserving浏览器＆QUOT;返回]使用AJAX / jQuery的加载页面和history.pushState方法按钮功能（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！