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

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);
};