इतिहास.pushState और history.replaceState का उपयोग कब किया जाए?

Question

क्या कोई ऐसी घटना है जहां मैं इतिहास की स्थिति संशोधित होने पर सदस्यता ले सकता हूं? कैसे?

Answer 1

onpopstate घटना सक्रिय किया जाना चाहिए इतिहास बदल जाता है, आप इसे करने के लिए अपने कोड में इस तरह बाध्य कर सकते हैं:

window.onpopstate = function (event) { 
    // do stuff here 
} 

इस घटना को भी पृष्ठ लोड होने के लिए, आप घटना है कि क्या निर्धारित कर सकते हैं निकाल दिया जा सकता है एक राज्य संपत्ति के लिए घटना वस्तु की जाँच करके निकाल दिया गया था एक पृष्ठ लोड से, या का उपयोग कर pushState/replaceState द्वारा, यह वर्तमान में कोई onpushstate घटना दुर्भाग्य है अगर घटना एक पृष्ठ लोड

window.onpopstate = function (event) { 
    if (event.state) { 
    // history changed because of pushState/replaceState 
    } else { 
    // history changed because of a page load 
    } 
} 

वहाँ के कारण हुई थी अपरिभाषित हो जाएगा , इस के आसपास पाने के लिए आपको लपेटने की जरूरत है अपने स्वयं के ऑनशशस्ट ईवेंट को लागू करने के लिए पुशस्टेट और प्रतिस्थापन दोनों विधियां।

मेरे पास एक लाइब्रेरी है जो पुशस्टेट के साथ काम करना आसान बनाता है, इसे Davis.js नामक चेक आउट करने के लायक हो सकता है, यह पुशस्टेट के आधार पर रूटिंग के साथ काम करने के लिए एक सरल एपीआई प्रदान करता है।

Answer 2

मैं उपयोग करने के लिए यह भी जब pushState और replaceState कहा जाता है के बारे में सूचित किया जाता था:

// Add this: 
var _wr = function(type) { 
    var orig = history[type]; 
    return function() { 
     var rv = orig.apply(this, arguments); 
     var e = new Event(type); 
     e.arguments = arguments; 
     window.dispatchEvent(e); 
     return rv; 
    }; 
}; 
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState'); 

// Use it like this: 
window.addEventListener('replaceState', function(e) { 
    console.warn('THEY DID IT AGAIN!'); 
}); 

हालांकि यह आमतौर पर overkill है। और यह सभी ब्राउज़रों में काम नहीं कर सकता है। (मुझे केवल अपने ब्राउज़र के मेरे संस्करण की परवाह है।)

एनबी। यह Google क्रोम एक्सटेंशन सामग्री स्क्रिप्ट में भी काम नहीं करता है, क्योंकि इसे साइट के जेएस पर्यावरण को बदलने की अनुमति नहीं है। आप कोड के साथ <script> डालने के द्वारा उस पर काम कर सकते हैं, लेकिन यह और भी अधिक है।