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

Я хотел бы сохранить функциональность кнопки "Назад" при загрузке страниц с помощью метода AJAX (jQuery load) и нажатия URL-адреса на панель браузера с помощью метода history.pushState. Проблема возникает, когда вы нажимаете кнопку браузера, а первый клик восстанавливает предыдущий 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 при первом нажатии кнопки "Назад"?

Приветствуется любая помощь/совет.

Ответ 1

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

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

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

Ответ 2

Для этого вам нужно подписаться на событие "popstate".

Событие popstate запускается в некоторых случаях при навигации к записи истории сеанса. спецификация HTML5

Вы можете сделать это следующим образом:

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

Ответ 3

Вы можете использовать событие popstate для этой цели. Подробнее см. https://developer.mozilla.org/en/DOM/window.onpopstate.

Также посмотрите History.js, который предоставляет оболочку и может отбросить URL-адреса хеш-страниц, если браузер не поддерживает историю api.