История pushstate назад и вперед функциональность

Question

Я только что создал сайт, где все страницы загружаются с использованием ajax. Сейчас я пытаюсь заставить кнопки браузера назад и вперед работать. Кнопка возврата была довольно простой, все, что мне нужно было сделать, это:

$(window).on('popstate', function(e) {
    get_page_content(location.href);
});

, где get_page_content() - это функция, которую я использую для получения и замены содержимого страницы при нажатии на ссылку. И вот как я использую pushstate внутри get_page_content():

window.history.pushState('', '', url);

Проблема в том, что когда я go назад, кнопка «вперед» недоступна. Как я могу использовать кнопку вперед?

Answer 1

Я только что понял, что у меня есть window.history.pushState('', '', url); внутри get_page_content(), который затем вызывался каждый раз, когда происходило событие onpopstate, и в итоге ничего не стоило go переслать. Я просто переместил pushState за пределы get_page_content() и все работает. Вот что у меня сейчас есть:

$('body').on('click', 'a:not([href^="#"])', function(e) {

  if ( this.host === window.location.host ) {

    e.preventDefault()

    get_page_content($(this).attr('href'));
    window.history.pushState('', '', url);

  }

});

$(window).on('popstate', function(e) {

    get_page_content(location.href);

});

function get_page_content(url) {
  // ...
}