浏览器的后退按钮不起作用+如果不单击刷新按钮则不会加载内容

Question

我对 JS/jQuery/Ajax 很陌生，我有这段代码。我希望文章标签中的内容发生变化，但在用户单击网站上的链接时保持所有其余部分（页眉、菜单和页脚）保持不变。我绝对不想完全重新加载整个页面，因为它会导致糟糕的用户体验。 这工作完美，代码正在加载新页面，当您单击链接时标题正在更改，但浏览器的后退按钮不再起作用，标题仍然与我所在的页面相同，真的很烦人。我应该怎么做才能解决这个非常烦人的问题？

$(function() {
  var $article = $("article"),
  
      init = function() {
        // Do this when a page loads.
      },
      ajaxLoad = function(html) {
        document.title = html
          .match(/<title>(.*?)<\/title>/)[1]
          .trim();
        init();
      };
  init();

  $(document).on("click", "a, area", function() { 
    var href = $(this).attr("href");
    history.pushState({}, '', href);
    $article.load(href + " article>*", ajaxLoad);
    return false;
  });
});

非常感谢您的帮助！

Answer 1

我在最后一个

init()之后添加了这一点

并且效果完美！

$(window).on("popstate", function(e) {
    if (e.originalEvent.state !== null) {
        loadPage(location.href);
    }
});

loadPage = function(href) {
    $article.load(href + " article>*", ajaxLoad);
};