我已经为我的网站提出了一个解决方案,其中包括使用ajax在网站上展示一般信息。为此,每次用户使用window.history.pushState方法加载某些特定内容时,我都会更改URL。但是,当我按Backspace键或按Back键时,旧的URL的内容未加载(但是URL已加载)。
我已经尝试了几种在SO上没有问题的解决方案。
这是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);
});
});
希望你们能帮助:)
最佳答案
仅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);
}
});
请注意,
history.state
在历史记录API中受较少支持。如果要支持所有pushState
浏览器,则可能需要另一种方式来提取popstate上的当前状态,可能是通过解析URL。缓存priceCheck结果的名称以及将其从缓存中向前/向后拉出而不是发出更多的php请求,在这里也是微不足道的,并且可能是一个好主意。
关于javascript - 后退按钮/退格键不适用于window.history.pushState,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19335372/