Javascript 使用 AJAX/jQuery 保留浏览器“后退”按钮功能以加载页面和 history.pushState() 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7767561/
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
preserving browser "back" button functionality using AJAX/jQuery to load pages and history.pushState() method
提问by tim peterson
I'd like to preserve the back button functionality when loading pages via AJAX (jQuery loadmethod) and pushing the URL to the browser bar via the history.pushStatemethod. The problem occurs when one clicks on the browser back button and the 1st click only restores the previous URL but does not load the previous page.
我想在通过 AJAX（jQueryload方法）加载页面并通过该history.pushState方法将 URL 推送到浏览器栏时保留后退按钮功能。问题出现在一次点击浏览器的后退按钮，第一次点击只恢复之前的URL，但没有加载之前的页面。
Here's my code so far:
到目前为止，这是我的代码：
$(function(){
var profile_url= "/profile";
$('#click_button').click(function(){
$('#main_content').load(profile_url);
history.pushState({profile:profile_info}, "profile", profile_url);
});
});
My question is is there any way to do an AJAX load of the previous page into the #main_contentdiv on the 1st click of the back button?
我的问题是有没有办法#main_content在第一次单击后退按钮时将前一页的 AJAX 加载到div 中？
Any help/advice would be greatly appreciated.
任何帮助/建议将不胜感激。
回答by tim peterson
I'd like to direct everyone to a jQuery plugin called PJAX which accomplishes what I was ultimately interested in asking this question. Pjax() combines jQuery AJAX and pushState for page loading and preserving browser history.
我想引导每个人使用一个名为 PJAX 的 jQuery 插件，它完成了我最终有兴趣提出这个问题的目的。Pjax() 结合了 jQuery AJAX 和 pushState 用于页面加载和保存浏览器历史记录。
Here's the code, and here's a nice demoof pjax()in action.
It is really great and easy to use, in the demo, just remember to click the checkbox which is there to help demonstrate pjax()'s functionality.
它真的很棒且易于使用，在演示中，只需记住单击用于帮助演示pjax()功能的复选框。
回答by Anton Timmermans
For this you need to subscribe to the 'popstate' event.
为此，您需要订阅“popstate”事件。
The popstate event is fired in certain cases when navigating to a session history entry. HTML5 spec
在导航到会话历史记录条目时，在某些情况下会触发 popstate 事件。 HTML5 规范
You could do this like this:
你可以这样做：
window.onpopstate = function() {
$('#main_content').load(location.href)
};
回答by ThiefMaster
You can use the popstateevent for this purpose. See https://developer.mozilla.org/en/DOM/window.onpopstatefor details.
您可以将popstate事件用于此目的。有关详细信息，请参阅https://developer.mozilla.org/en/DOM/window.onpopstate。
Also have a look at History.jswhich provides a wrapper and can fallback to url hashtags in case the browser does not support the history api.
还可以查看History.js，它提供了一个包装器，可以在浏览器不支持历史 API 的情况下回退到 url 主题标签。
