Geri düğmesi/arka alanı window.history.pushState ile çalışmaz.

Question

Web sitemde genel bilgileri sunmak için ajax kullanarak içeren bir çözüm hazırladım. Bunu yaparken, bir kullanıcı window.history.pushState yöntemiyle belirli bir içeriği her yüklediğinde URL'yi değiştiriyorum. Ancak, geri tuşuna bastığımda veya geri tuşuna bastığımda, eski URL'nin içeriği yüklenmez (ancak URL yüklenir).

Şanssız olarak sunulan birçok çözümü denedim.

$(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); 
    }); 
}); 

siz arka/ileri ile sayfa işlevini yapmaz yalnız :)

Answer 1

pushState yardımcı Umut: Burada

ajax görevlerinden birisi bir örnektir. Yapmanız gereken şey, onpopstate dinlemektir ve içeriği, tıklamada ne olacağına benzer şekilde kendiniz yükleyin. history.state tarih API biraz daha az desteklenen parçası olduğunu

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); 
    } 
}); 

Not. Tüm pushState tarayıcılarını desteklemek isterseniz, muhtemelen durumun URL'yi ayrıştırılarak popstate üzerinde mevcut durumu çekmenin başka bir yoluna sahip olmanız gerekir.

Burada daha fazla php istekleri yapmak yerine, fiyatCheck adının sonuçlarını önbelleğe almak ve önbellekten geri/ileriye çekmek için buradaki önemsiz ve muhtemelen iyi bir fikir olacaktır.