我很确定这里有一个非常简单的解决方案,但我似乎想不出最好的方法。我正在使用 History.js,它利用了 History API。假设我从以下页面开始:
<div ="header">
Header
</div>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
我处理 AJAX 调用的方式是用新的 html 替换 #content 的内容。因此,例如,我加载了“内容 2”的文本。这一切都很好,直到用户导航回他们在我的网站上点击的第一页,因为它试图加载完整的第一页(包括#header和#footer,所以我最终得到:
<div ="header">
Header
</div>
<div id="content">
<div ="header">
Header
</div>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
</div>
<div id="footer">
Footer
</div>
我知道有更好的方法来构建我的页面以避免这个问题,但我似乎无法弄清楚它是什么。这是我正在使用的代码:
(function(window,undefined){
var
History = window.History,
State = History.getState();
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
$.ajax({
url: History.getState().url,
cache: false
}).done(function( html ) {
$("#content").html(html);
});
});
})(window);
有关处理此问题的正确方法的任何想法?