сохранение функциональности кнопки «назад» браузера с использованием AJAX / jQuery для загрузки страниц и метода history.pushState ()

Question

Я бы хотел сохранить функциональность кнопки «Назад» при загрузке страниц с помощью AJAX (метод jQuery load) и отправке URL-адреса на панель браузера с помощью метода history.pushState.Проблема возникает, когда вы нажимаете кнопку «Назад» в браузере, а 1-й щелчок восстанавливает только предыдущий URL-адрес, но не загружает предыдущую страницу.

Вот мой код:

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

Мой вопрос, есть ли способ загрузить AJAX предыдущую страницу в div #main_content при первом нажатии на кнопку назад?button?

Любая помощь / совет будет принята с благодарностью.

Answer 1

Я хотел бы направить всех к плагину jQuery под названием PJAX, который завершает то, что я в конечном счете заинтересовал, задавая этот вопрос.Pjax () сочетает в себе jQuery AJAX и pushState для загрузки страницы и сохранения истории браузера.

Вот код , а вот хорошая демонстрация из pjax() в действии.

Это действительно здорово и просто в использовании, вдемо, просто не забудьте установить флажок, чтобы продемонстрировать функциональность pjax().

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 , который предоставляет оболочку и может откатиться к хештегам URL, если браузер не поддерживает API истории..