history.replaceState () उदाहरण?

127

क्या कोई भी history.replaceState के लिए काम करने का उदाहरण दे सकता है? यह वही है जो w3.org कहता है:

history . replaceState(data, title [, url ] )

सत्र इतिहास में वर्तमान प्रविष्टि को दिए गए डेटा, शीर्षक और, यदि प्रदान किया गया है और अशक्त नहीं है, तो अद्यतन करता है।

अपडेट करें:

यह पूरी तरह से काम करता है:

history.replaceState( {} , 'foo', '/foo' );

यूआरएल बदल रहा है, लेकिन शीर्षक बदल नहीं रहा है। क्या वह बग है या मुझे कुछ याद आ रहा है? नवीनतम क्रोम पर परीक्षण किया गया।

javascript ajax html

— Serjas
स्रोत

3

मैं आमतौर पर जावास्क्रिप्ट सवालों के लिए ऐड-ऑन लाइब्रेरी को आगे नहीं बढ़ाता हूं, लेकिन इस मामले में मैं एक अपवाद बनाऊंगा। History.js पुस्तकालय एक छोटे से शिम है कि आधुनिक ब्राउज़र में इतिहास एपीआई में विचित्र दुर्व्यवहार का एक बहुत साफ़ होता है। यह भी IE के पुराने संस्करणों के लिए वैकल्पिक समर्थन प्रदान करता है।

— पॉंच

2

MDN ब्राउज़र इतिहास

— राइटअप है

@Pointy history.js बढ़िया काम करता है। मैंने अपने प्रश्न में कोड अपडेट किया है। मेरी कोई समस्या नहीं है कि मैं पिछले पृष्ठ पर ब्राउज़र बैक बटन के साथ वापस नहीं जा सकता हूँ

— सर्जस

3

मोज़िला के अनुसार , titleपैरामीटर वास्तव में उपयोग नहीं किया जाता है।

— रॉकेट हज़मत

3

पहला उत्तर वास्तव में स्वीकृत उत्तर नहीं होना चाहिए, यह देखते हुए प्रश्न एक replaceStateउदाहरण के लिए पूछता है , और स्वीकृत उत्तर किसी भी तरह से एक replaceStateउदाहरण नहीं है।

— कोरयथन

68

वास्तव में यह एक बग है, हालांकि अब 2 साल के लिए जानबूझकर। समस्या कुछ अस्पष्ट चश्मा और जटिलता के साथ है जब document.titleऔर आगे / पीछे शामिल हैं।

वेबकिट और मोज़िला पर बग संदर्भ देखें । इसके अलावा इतिहास एपीआई की शुरूआत पर ओपेरा ने कहा कि यह शीर्षक पैरामीटर का उपयोग नहीं कर रहा था और शायद अभी भी नहीं है।

वर्तमान में पुशस्टेट और रीप्लेस्टेट के 2 तर्क - इतिहास प्रविष्टि का शीर्षक - ओपेरा के कार्यान्वयन में उपयोग नहीं किया जाता है, लेकिन एक दिन हो सकता है।

संभावित समाधान

एकमात्र तरीका जो मैं देख रहा हूं वह शीर्षक तत्व को बदलना और इसके बजाय पुशस्टेट का उपयोग करना है:

document.getElementsByTagName('title')[0].innerHTML = 'bar';
window.history.pushState( {} , 'bar', '/bar' );

— सेव
स्रोत

Jquery उपयोगकर्ताओं के लिए .. $ ("शीर्षक") आज़माएं। html (_title);

— सूरज जैन

3

इसका परिणाम यह हो सकता है कि आप इसे कैसे लागू करते हैं, इसके आधार पर बैक बटन को "डबल क्लिक" करने की आवश्यकता होती है। एक सरल समाधान का उपयोग करना replaceState()और बस दस्तावेज़ शीर्षक को मैन्युअल रूप से सेट करना हो सकता हैdocument.title = "title"

— newshorts

38

यहाँ एक न्यूनतम, आकस्मिक उदाहरण है।

console.log( window.location.href );  // whatever your current location href is
window.history.replaceState( {} , 'foo', '/foo' );
console.log( window.location.href );  // oh, hey, it replaced the path with /foo

वहाँ अधिक है, replaceState()लेकिन मुझे नहीं पता कि वास्तव में यह क्या है कि आप इसके साथ क्या करना चाहते हैं।

— ट्रॉट
स्रोत

2

url बदल रहा है, लेकिन शीर्षक नहीं बदल रहा है .. नवीनतम chrome @trott के साथ परीक्षण किया गया

— सर्जस

6

@ सर्जस titleपैरामीटर replaceState()है, मेरी जानकारी के सर्वश्रेष्ठ में, सभी ब्राउज़रों में नजरअंदाज कर दिया।

— ट्रॉट

10

history.pushStateइतिहास स्टैक पर वर्तमान पृष्ठ स्थिति को पुश करता है , और पता बार में URL बदलता है। इसलिए, जब आप वापस जाते हैं, तो वह स्थिति (आपके द्वारा पास की गई वस्तु) आपको वापस कर दी जाती है।

वर्तमान में, यह सब करता है। कोई भी अन्य पृष्ठ क्रिया, जैसे नया पृष्ठ प्रदर्शित करना या पृष्ठ शीर्षक बदलना, आपके द्वारा किया जाना चाहिए।

आपके द्वारा लिंक किया गया W3C कल्पना केवल एक मसौदा है, और ब्राउज़र इसे अलग तरीके से लागू कर सकता है। उदाहरण के लिए, फ़ायरफ़ॉक्सtitle पूरी तरह से पैरामीटर को अनदेखा करता है ।

यहाँ एक सरल उदाहरण है pushStateकि मैं अपनी वेबसाइट पर उपयोग करता हूं।

(function($){
    // Use AJAX to load the page, and change the title
    function loadPage(sel, p){
        $(sel).load(p + ' #content', function(){
            document.title = $('#pageData').data('title');
        });
    }

    // When a link is clicked, use AJAX to load that page
    // but use pushState to change the URL bar
    $(document).on('click', 'a', function(e){
        e.preventDefault();
        history.pushState({page: this.href}, '', this.href);
        loadPage('#frontPage', this.href);
    });

    // This event is triggered when you visit a page in the history
    // like when yu push the "back" button
    $(window).on('popstate', function(e){
        loadPage('#frontPage', location.pathname);
        console.log(e.originalEvent.state);
    });
}(jQuery));

— रॉकेट हज़मत
स्रोत

29

स्वीकार किए गए उत्तर को "रिप्लेसस्टेट" के बजाय "पुशस्टेट" क्यों समझाता है?

— गिवरोस त्सोपानोग्लू

1

@GiwrgosTsopanoglou: मैंने एक साल पहले इसका जवाब दिया था, इसलिए मुझे यकीन नहीं है कि क्यों: -पी फिर भी, replaceStateवर्तमान पृष्ठ स्थिति को बदल देता है। यह आपको वर्तमान पृष्ठ स्थिति की स्थिति और URL को बदलने देता है ।

— रॉकेट हज़मत

2

यह सिर्फ इतना अजीब था कि मैं रिप्लेसस्टेट की जानकारी ढूंढ रहा था और मैंने पुशस्टेट के बारे में पढ़ना शुरू कर दिया: पी

— गिवरोस त्सोपानोग्लू

6

उदाहरण देखो

window.history.replaceState({
    foo: 'bar'
}, 'Nice URL Title', '/nice_url');

window.onpopstate = function (e) {
    if (typeof e.state == "object" && e.state.foo == "bar") {
        alert("Blah blah blah");
    }
};

window.history.go(-1);

और खोज location.hash;

— avalkab
स्रोत

2

दूसरे तर्क शीर्षक का अर्थ पृष्ठ का शीर्षक नहीं है - यह उस पृष्ठ की स्थिति के लिए परिभाषा / जानकारी से अधिक है

लेकिन हम अभी भी onpopstate इवेंट का उपयोग करके शीर्षक को बदल सकते हैं , और शीर्षक नाम को दूसरे तर्क से पारित नहीं कर सकते हैं, लेकिन ऑब्जेक्ट के रूप में पारित पहले पैरामीटर से एक विशेषता के रूप में

संदर्भ: http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

— महेश
स्रोत

2

एमडीएन हिस्ट्री डॉक के अनुसार
स्पष्ट रूप से कहा गया है कि दूसरा तर्क भविष्य के लिए है जिसका उपयोग अभी के लिए नहीं किया गया है। आप सही हैं कि दूसरा तर्क वेब-पेज शीर्षक से संबंधित है, लेकिन वर्तमान में इसे सभी प्रमुख ब्राउज़र द्वारा अनदेखा किया गया है।

फ़ायरफ़ॉक्स वर्तमान में इस पैरामीटर की उपेक्षा करता है, हालांकि भविष्य में इसका उपयोग कर सकता है। खाली स्ट्रिंग को यहां पास करना भविष्य में विधि में बदलाव के खिलाफ सुरक्षित होना चाहिए। वैकल्पिक रूप से, आप जिस राज्य में जा रहे हैं, उसके लिए एक छोटा शीर्षक पारित कर सकते हैं।

— मुनीर खाखी
स्रोत

दूसरा तर्क वेब-पेज के शीर्षक का उल्लेख नहीं करता है - एमडीएन डॉक्टर जो आपने जोड़ा है वह कहता है " उस राज्य के लिए एक लघु शीर्षक पास करें जिसमें आप आगे बढ़ रहे हैं।" । यह W3C इतिहास इंटरफ़ेस प्रलेखन से सहमत है "सत्र इतिहास पर दिए गए डेटा को दिए गए शीर्षक के साथ धक्का देता है" । उस वाक्यांश में डेटा राज्य डेटा है, इसलिए फिर से शीर्षक राज्य (डेटा) को संदर्भित करता है।

— स्टीफन पी।

1

मैं वास्तव में @ सेव का जवाब देना चाहता था।

सेव सही है, अंदर एक बग है window.history.replaceState

इसे ठीक करने के लिए बस शीर्षक को मैन्युअल रूप से सेट करने के लिए कंस्ट्रक्टर को फिर से लिखें।

var replaceState_tmp = window.history.replaceState.constructor;
window.history.replaceState.constructor = function(obj, title, url){
    var title_ = document.getElementsByTagName('title')[0];
    if(title_ != undefined){
        title_.innerHTML = title;
    }else{
        var title__ = document.createElement('title');
        title__.innerHTML = title;
        var head_ = document.getElementsByTagName('head')[0];
        if(head_ != undefined){
            head_.appendChild(title__);
        }else{
            var head__ = document.createElement('head');
            document.documentElement.appendChild(head__);
            head__.appendChild(title__);
        }
    }
    replaceState_tmp(obj,title, url);
}

— अद्भुत
स्रोत

2

ऐसा मत करो। डिफ़ॉल्ट लेखन कार्य वास्तविक रूप से खराब शैली है

— रेने रोथ

3

जब आपको इस बग की आवश्यकता होती है तो आप और क्या सुझाव देते हैं?

— ग्लेन प्लास

@GlennPlas ने प्रतिकिया रे के खिलाफ एक PR खोला :) :)

— zero_cool

0

मान लीजिए कि https://www.mozilla.org/foo.html निम्नलिखित जावास्क्रिप्ट को कार्यान्वित करता है:

const stateObj = { foo: 'bar' };

history.pushState(stateObj, '', 'bar.html');

यह URL बार को https://www.mozilla.org/bar2.html प्रदर्शित करने का कारण बनेगा , लेकिन ब्राउज़र के कारण bar2.html लोड नहीं होगा या यह भी जांचेगा कि bar2.html मौजूद है।

— आशीष
स्रोत