javascript JQuery 和 history.js 后退按钮不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11146397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery & history.js back button not working
提问by Al_
I'm using history.JS (latest) with Jquery (latest) to load and replace just a portion of a website, this is all working, currently I'm only trying to get it working in modern browsers so I'm not fiddling with the hash changes.
我正在使用 history.JS（最新）和 Jquery（最新）来加载和替换网站的一部分，这一切正常，目前我只是想让它在现代浏览器中工作，所以我没有摆弄随着哈希变化。
Everything seems to work, however when I click the back button on the browser (latest FF & Chrome) the page does not change (although the url and title do change). I've had a google and a look on here but I can't see what is happening.
一切似乎都正常，但是当我单击浏览器（最新的 FF 和 Chrome）上的后退按钮时，页面不会更改（尽管 url 和标题会更改）。我用谷歌搜索了一下这里，但我看不到发生了什么。
Looking on stack overflow I found this page: Restoring content when clicking back button with History.jswhich seems to be asking a similar question. I've add the loaded contents of the #left_col (which is the div being replaced) to the state data, but I'm not really sure where to go from there, I know I need to reload that data when the state changes, but I can't see how.
查看堆栈溢出我找到了这个页面：Restoring content when click 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;
});
I'd really appreciate any help!
我真的很感激任何帮助！
update:
更新：
I managed to get the page to change on the user clicking back, but it doesn't load the right state (it seems to go two states back rather than one), the code I've added to the above code is:
我设法让页面在用户点击后改变，但它没有加载正确的状态（它似乎返回了两个状态而不是一个），我添加到上面的代码中的代码是：
window.addEventListener('popstate', function(event) {
var State = History.getState();
$('#left_col').html(State.data.leftcol);
});
采纳答案by Al_
It turns out I needed to update the page on statechange using History.js, not poState as I'd thought. below is my full (and working) code for anyone who may be having the same issue:
事实证明，我需要使用 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;
});
回答by demux
You are correct when you say that you need to reload the data when the state changes, in that you will have to have the javascript undo the changes made or render the contents again from the original state.
当您说在状态更改时需要重新加载数据时，您是正确的，因为您必须让 javascript 撤消所做的更改或从原始状态再次呈现内容。
This will probably better suit your agenda: https://github.com/thorsteinsson/jquery-routes
这可能更适合您的议程：https: //github.com/thorsteinsson/jquery-routes
Edit:
编辑：
You might also consider using backbone.js (http://backbonejs.org/) as it will help you create structure and abstract code in a way that makes it easier to understand what needs to be done.
您还可以考虑使用backbone.js (http://backbonejs.org/)，因为它可以帮助您以一种更容易理解需要完成的工作的方式创建结构和抽象代码。
Backbone comes with it's own url router and so called views.
Backbone 带有它自己的 url 路由器和所谓的视图。
