बैक बटन/बैकस्पेस window.history.pushState

Question

के साथ काम नहीं करता है मैंने अपनी वेबसाइट के लिए एक समाधान बनाया है जिसमें वेबसाइट पर सामान्य जानकारी प्रस्तुत करने के लिए AJAX का उपयोग करना शामिल है। ऐसा करने में, जब भी कोई उपयोगकर्ता window.history.pushState विधि के साथ कुछ विशिष्ट सामग्री लोड करता है तो मैं URL बदल रहा हूं। हालांकि, जब मैं बैकस्पेस दबाता हूं या वापस दबाता हूं, तो पुराने यूआरएल की सामग्री लोड नहीं होती है (हालांकि यूआरएल लोड होता है)।

मैंने बिना किसी किस्मत के SO पर प्रस्तुत कई समाधानों का प्रयास किया है।

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

आशा है कि आप लोग :)

Answer 1

pushState मदद कर सकते हैं अकेले वापस/आगे के साथ अपने पृष्ठ समारोह नहीं होगा:

यहाँ ajax कार्यों में से एक का एक उदाहरण है। आपको क्या करना होगा 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 इतिहास एपीआई के एक कुछ हद तक कम समर्थित हिस्सा है। यदि आप सभी pushState ब्राउज़र का समर्थन करना चाहते हैं तो आपको वर्तमान स्थिति को पॉपस्टेट पर खींचने का दूसरा तरीका होगा, शायद यूआरएल को पार्स करके।

यह मामूली परिणाम और संभवतः एक अच्छा विचार होगा, कीमत के परिणामों को कैश करने के लिए भी नाम के लिए जांच करें और उन्हें अधिक PHP अनुरोध करने के बजाय बैक/आगे कैश से खींचें।