我正在使用最新版的history.js和jQuery来加载和替换网站的部分内容,这一切都在工作中。目前我只想让它在现代浏览器中运行,所以我没有去研究哈希变化。
一切似乎都正常工作,但是当我在浏览器上点击“返回”按钮时(最新的FF和Chrome),页面没有改变(虽然url和标题已经改变)。我在Google上搜索以及在stackoverflow上找了找,但是我看不出到底出了什么问题。
在stackoverflow上我找到了这个页面:Restoring content when clicking back button with History.js ,看起来这个人也提出了类似的问题。我已经将#left_col(被替换的div)的加载内容添加到状态数据中,但我真的不知道该怎么做,我知道我需要在状态改变时重新加载那些数据,但我不知道如何做到。
var History = window.History;
var origTitle = document.title;
if ( !History.enabled ) {
return false;
}
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
History.log(State.data, State.title, State.url);
});
$('.ajaxload').live("click", function() {
History.pushState({state:1,leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));
$('#left_col').load($(this).attr("rel"));
return false;
});
我非常感谢任何帮助!
更新:
我设法在用户点击“后退”时更改了页面,但它不会加载正确的状态(似乎返回两个状态而不是一个),我添加到上面代码中的代码是:
window.addEventListener('popstate', function(event) {
var State = History.getState();
$('#left_col').html(State.data.leftcol);
});