JQuery＆history.js后退按钮不起作用
我正在使用history.JS（最新）与Jquery（最新）加载和替换一个网站的一部分，这一切都工作，目前我只是想让它在现代浏览器中工作，所以我不是摆弄哈希变化。
一切似乎都有效，但是当我点击浏览器上的后退按钮（最新的FF和Chrome）时，页面不会改变（尽管url和标题确实发生了变化）。 我有一个谷歌，看看这里，但我看不到发生了什么。
查看堆栈溢出我找到了这个页面： 单击带有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); });
事实certificate我需要使用History.js更新statechange上的页面，而不是像我想的那样更新poState。 以下是我可能遇到同样问题的完整（和工作）代码：
var History = window.History; var origTitle = document.title; if ( !History.enabled ) { return false; } History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href")); // save initial state to browser history function updateContent(data) { if(data == null) return; // check if null (can be triggered by Chrome on page load) $('#left_col').html(data); // replace left col with new (or old from history) data History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href")); // save this state to browser history } History.Adapter.bind(window,'statechange',function(){ // use this NOT popstate (history.JS) var State = History.getState(); //History.log(State.data, State.title, State.url); updateContent(State.data.leftcol); // call update content with data for left col from saved state }); $('.ajaxload').live("click", function() { // attach click event, get html and send it to updateContent $.get($(this).attr("rel"), updateContent); return false; });
当你说你需要在状态改变时重新加载数据时，你是正确的，因为你必须让javascript撤消所做的更改或者从原始状态再次渲染内容。
这可能更适合您的议程： https ： //github.com/thorsteinsson/jquery-routes
编辑：
您也可以考虑使用backbone.js（http://backbonejs.org/），因为它将帮助您以更容易理解需要完成的方式创建结构和抽象代码。
Backbone带有它自己的url路由器和所谓的视图。