后退按钮/退格键不适用于window.history.pushState

我为我的网站提供了一个解决方案，其中包括使用ajax在网站上显示一般信息。在此过程中，每当用户使用window.history.pushState方法加载某些特定内容时，我都会更改URL。但是，当我按退格键或按回时，旧URL的内容不会被加载（但URL已加载）。后退按钮/退格键不适用于window.history.pushState

我试过几个解决方案，没有任何运气。

这里的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); 
    }); 
});

希望你们能帮助:)

来源

2013-10-12 Amnestic

看起来像一个工作的一个_setTimeout_循环 –

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请求。

来源

2013-10-12 15:24:25 numbers1311407

感谢您的答案，这是有帮助的。你提到了支持问题。现在的情况如何呢？ –

我不能说这个权威，但根据[mozilla的信息]（https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history），window.history使它到铬v5，但国家财产没有出现，直到v18。其他现代浏览器似乎已经从历史的介绍中支持了国家。 – numbers1311407

只有单身后背，也没有前进的按钮。 –

后退按钮/退格键不适用于window.history.pushState

回答

相关问题