history.pushstate और popstate के साथ बैक बटन का उपयोग करते समय परिवर्तन को कैसे ट्रिगर करें?

Question

जब मैं जेएस की बात करता हूं तो मैं बहुत नौसिखिया हूं इसलिए मुझे खेद है कि अगर मैं कुछ सचमुच सरल हूं।

असल में, मैं history.pustate और popstate का उपयोग कर में बहुत शोध किया है और मैं कर दिया है कि ऐसा एक क्वेरी स्ट्रिंग यूआरएल (?v=images) या (?v=profile) ... के अंत (v में जोड़ा जाता है 'दृश्य') जिसका अर्थ है इस का उपयोग करते हुए:

var url = "?v=profile" 
var stateObj = { path: url }; 
history.pushState(stateObj, "page 2", url); 

मैं इसे तो मैं एक div में लेकिन पेज जो मैं .load() फ़ंक्शन का उपयोग किया है पुन: लोड के बिना सामग्री लोड कर सकते हैं बनाना चाहते हैं। $(document).ready() खंड में

$(window).bind('popstate', function(event) { 
    var state = event.originalEvent.state; 

और बाद में सिर्फ <script> टैग के भीतर की कोशिश की और न काम किया:

मैं तो इस कोड का इस्तेमाल किया।

मुझे नहीं पता कि इसे कैसे बनाया जाए ताकि जब मैं बैक बटन का उपयोग करता हूं या कम से कम इसे बनाता हूं तो सामग्री बदल जाती है ताकि मैं ऐसा करने के लिए अपना स्वयं का फ़ंक्शन ट्रिगर कर सकूं; और मुझे लगता है कि यह राज्य वस्तु के साथ कुछ करने के लिए है ?! मुझे बस कुछ भी ऑनलाइन नहीं दिख रहा है जो प्रक्रिया को स्पष्ट रूप से समझाता है।

अगर कोई मेरी मदद कर सकता है तो यह आश्चर्यजनक होगा और जो भी करता है उसके लिए अग्रिम धन्यवाद!

Answer 1

popstate में केवल एक राज्य होता है जब कोई होता है।

इसे इस तरह से चला जाता है जब:

1. प्रारंभिक पृष्ठ,
2. नई लोड पृष्ठ लोड राज्य के साथ pushState
3. के माध्यम से जोड़ा वापस बटन दबाया

तो, कोई राज्य है, क्योंकि प्रारंभिक पृष्ठ नियमित रूप से लोड किया गया था, pushState के साथ नहीं। नतीजतन, onpopstate घटना null के साथ निकाल दी गई है। तो जब यह null है, तो इसका मतलब है कि मूल पृष्ठ लोड होना चाहिए।

आप इसे इस तरह history.pushState लगातार बुलाया जाएगा और आप केवल इस तरह की एक स्थिति परिवर्तन समारोह प्रदान करने की आवश्यकता है कि लागू कर सकता है: शायद यह सबसे अच्छा समाधान नहीं है Click here for jsFiddle link

function change(state) { 
    if(state === null) { // initial page 
     $("div").text("Original"); 
    } else { // page added with pushState 
     $("div").text(state.url); 
    } 
} 

$(window).on("popstate", function(e) { 
    change(e.originalEvent.state); 
}); 

$("a").click(function(e) { 
    e.preventDefault(); 
    history.pushState({ url: "/page2" }, "/page2", "page 2"); 
}); 

(function(original) { // overwrite history.pushState so that it also calls 
         // the change function when called 
    history.pushState = function(state) { 
     change(state); 
     return original.apply(this, arguments); 
    }; 
})(history.pushState); 

Answer 2

, और शायद यह आपके सूट नहीं करता है की जरूरत है। लेकिन मेरे लिए पेज को फिर से लोड करना सबसे अच्छा था। तो पृष्ठ सुसंगत है यह वर्तमान क्वेरीस्ट्रिंग के अनुसार सबकुछ लोड करता है।

$(document).ready(function() { 
    $(window).on("popstate", function (e) { 
     location.reload(); 
    }); 
});