javascript 后退按钮/退格键不适用于 window.history.pushState
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19335372/
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
Back button / backspace does not work with window.history.pushState
提问by Amnestic
I have made a solution for my website which includes using ajax to present the general information on the website. In doing this, I am changing the URL every time a user loads some specific content with the window.history.pushState method. However, when I press backspace or press back, the content of the old url is not loaded (however the URL is loaded).
我为我的网站制定了一个解决方案，其中包括使用 ajax 在网站上显示一般信息。为此，每次用户使用 window.history.pushState 方法加载某些特定内容时，我都会更改 URL。但是，当我按退格键或按回键时，不会加载旧 url 的内容（但是加载了 URL）。
I have tried several solutions presented on SO without any luck.
我已经尝试了几种在 SO 上提出的解决方案，但没有任何运气。
Here is an example of one of the ajax functions:
这是 ajax 函数之一的示例：
$(document).ready(function(){
$(document).on("click",".priceDeckLink",function(){
$("#hideGraphStuff").hide();
$("#giantWrapper").show();
$("#loadDeck").fadeIn("fast");
var name = $(this).text();
$.post("pages/getPriceDeckData.php",{data : name},function(data){
var $response=$(data);
var name = $response.filter('#titleDeck').text();
var data = data.split("%%%%%%%");
$("#deckInfo").html(data[0]);
$("#textContainer").html(data[1]);
$("#realTitleDeck").html(name);
$("#loadDeck").hide();
$("#hideGraphStuff").fadeIn("fast");
loadGraph();
window.history.pushState("Price Deck", "Price Deck", "?p=priceDeck&dN="+ name);
});
});
Hope you guys can help :)
希望大家帮帮忙 :)
回答by numbers1311407
pushStatealone will not make your page function with back/forward. What you'd need to do is listen to onpopstateand load the contents yourself similar to what would happen on click.
pushState单独不会使您的页面具有后退/前进功能。您需要做的是onpopstate自己收听和加载内容，类似于点击时发生的情况。
var load = function (name, skipPushState) {
$("#hideGraphStuff").hide();
// pre-load, etc ...
$.post("pages/getPriceDeckData.php",{data : name}, function(data){
// on-load, etc ...
// we don't want to push the state on popstate (e.g. 'Back'), so `skipPushState`
// can be passed to prevent it
if (!skipPushState) {
// build a state for this name
var state = {name: name, page: 'Price Deck'};
window.history.pushState(state, "Price Deck", "?p=priceDeck&dN="+ name);
}
});
}
$(document).on("click", ".priceDeckLink", function() {
var name = $(this).text();
load(name);
});
$(window).on("popstate", function () {
// if the state is the page you expect, pull the name and load it.
if (history.state && "Price Deck" === history.state.page) {
load(history.state.name, true);
}
});
Note that history.stateis a somewhat less supported part of the history API. If you wanted to support all pushStatebrowsers you'd have to have another way to pull the current state on popstate, probably by parsing the URL.
请注意，这history.state是历史 API 中支持较少的部分。如果你想支持所有pushState浏览器，你必须有另一种方法来在 popstate 上拉出当前状态，可能是通过解析 URL。
It would be trivial and probably a good idea here to cache the results of the priceCheck for the name as well and pull them from the cache on back/forward instead of making more php requests.
在这里缓存名称的 priceCheck 的结果并在后退/前进时将它们从缓存中拉出，而不是发出更多 php 请求，这将是微不足道的，并且可能是一个好主意。
