पृष्ठ को फिर से लोड किए बिना एक क्वेरी स्ट्रिंग को संशोधित करना

Question

मैं एक फोटो गैलरी बना रहा हूं, और जब फोटो को ब्राउज किया जाता है, तो क्वेरी स्ट्रिंग और शीर्षक को बदलने में सक्षम होना चाहूंगा।

मैं जिस व्यवहार की तलाश कर रहा हूं वह अक्सर निरंतर / अनंत पृष्ठ के कुछ कार्यान्वयनों के साथ देखा जाता है, जहां आप क्वेरी स्ट्रिंग स्क्रॉल करते समय पृष्ठ संख्या ( http://x.com?page=4 ) आदि को बढ़ाते रहते हैं। यह होना चाहिए सिद्धांत रूप में सरल है, लेकिन मैं कुछ ऐसा चाहूंगा जो प्रमुख ब्राउज़रों में सुरक्षित है।

मुझे यह शानदार पोस्ट मिला , और उदाहरण के साथ अनुसरण करने की कोशिश कर रहा था window.history.pushstate, लेकिन यह मेरे लिए काम नहीं करता है। और मुझे यकीन नहीं है कि यह आदर्श है क्योंकि मैं वास्तव में ब्राउज़र इतिहास को संशोधित करने की परवाह नहीं करता हूं।

मैं बस वर्तमान में देखी गई फोटो को बुकमार्क करने की क्षमता प्रदान करने में सक्षम होना चाहता हूं, हर बार फोटो को बदलने के बिना पृष्ठ को फिर से लोड किए बिना।

यहाँ अनंत पृष्ठ का एक उदाहरण दिया गया है जो क्वेरी स्ट्रिंग को संशोधित करता है: http://tumbledry.org/

अद्यतन यह विधि मिली:

window.location.href = window.location.href + '#abc';

यह मेरे लिए काम करने के लिए प्रकट होता है, लेकिन मैं एक नए क्रोम पर हूँ .. यह शायद पुराने ब्राउज़रों के साथ कुछ मुद्दों का कारण होगा?

Comments

क्या आप कुछ उदाहरण साइट का लिंक पोस्ट कर सकते हैं जो गतिशील रूप से इसकी क्वेरी स्ट्रिंग को अपडेट करती है? मुझे नहीं लगता कि यह किया जा सकता है, लेकिन आप हैश मान को बदल सकते हैं और जो आप चाहते हैं उसे प्राप्त करने के लिए पर्याप्त हो सकता है।

— पॉइन्टी

जावास्क्रिप्ट / jquery के साथ URL में हेरफेर करने

— क्वेंटिन

GitHub URL

— क्वेंटिन

के संभावित डुप्लिकेट क्यों नई वेब ड्रॉपबॉक्स पृष्ठ ताज़ा बिना यूआरएल बदल सकते हैं? और तीन प्रश्नों को इसे डुप्लिकेट के रूप में चिह्नित किया गया है

— क्वेंटिन

@Quentin। आपके पास केवल एक करीबी वोट हो सकता है ...:)

— gdoron

Answer 1

यदि आप हैश संशोधन की तलाश कर रहे हैं, तो आपका समाधान ठीक काम करता है। हालाँकि, यदि आप क्वेरी को बदलना चाहते हैं, तो आप पुशस्टैट का उपयोग कर सकते हैं, जैसा आपने कहा था। यहाँ यह एक उदाहरण है जो आपको इसे ठीक से लागू करने में मदद कर सकता है। मैंने परीक्षण किया और यह ठीक काम किया:

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

यह पृष्ठ को फिर से लोड नहीं करता है, लेकिन यह केवल आपको URL क्वेरी को बदलने की अनुमति देता है। आप प्रोटोकॉल या होस्ट मानों को बदलने में सक्षम नहीं होंगे। और निश्चित रूप से इसे आधुनिक ब्राउज़रों की आवश्यकता है जो एचटीएमएल 5 इतिहास एपीआई को संसाधित कर सकते हैं।

अधिक जानकारी के लिए:

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Comments

मेरा मानना है कि आप छोटा कर सकते हैं window.location.protocol + '//' + window.location.hostबस के लिए: window.location.origin।

— गैरेट

इसके अलावा, जानकारी के एक बिट बिट के लिए, रिश्तेदार पथ के साथ भी काम करते हैं history.pushState()। किसी भी वास्तविक stateतर्क की आवश्यकता नहीं है। इन दोनों का मतलब है कि आप कुछ सरल कर सकते हैं जैसे history.pushState(null, '', '/foo?bar=true')कि आपका नया यूआरएल एक ही होस्ट / पोर्ट पर है।

— ब्लास्कोविच

ध्यान दें, यदि आप नहीं चाहते कि नया राज्य ब्राउज़र के इतिहास में दिखाई दे, तो आप history.replaceState()उसी तर्कों के साथ उपयोग कर सकते हैं ।

— ब्लैकस

उपयोग history.replaceState () अन्यथा आप क्लिक करने के लिए वापस बटन को दो बार आपके ब्राउज़र में की जरूरत है

— Zhenya

आधुनिक ब्राउज़रों में आप बस कर सकते हैं:if (window.history.pushState) { const newURL = new URL(window.location.href); newURL.search = '?myNewUrlQuery=1'; window.history.pushState({ path: newURL.href }, '', newURL.href); }

— एलन बैप्टिस्टा

Answer 2

फैबियो के जवाब से हटते हुए, मैंने दो कार्य किए जो शायद इस प्रश्न पर ठोकर खाने वाले किसी व्यक्ति के लिए उपयोगी होंगे। इन दो कार्यों के साथ, आप insertParam()एक तर्क के रूप में एक कुंजी और मूल्य के साथ कॉल कर सकते हैं । यह या तो URL पैरामीटर जोड़ देगा या, यदि एक क्वेरी परम पहले से ही एक ही कुंजी के साथ मौजूद है, तो यह उस पैरामीटर को नए मान में बदल देगा:

//function to remove query params from a URL
function removeURLParameter(url, parameter) {
    //better to use l.search if you have a location/link object
    var urlparts= url.split('?');   
    if (urlparts.length>=2) {

        var prefix= encodeURIComponent(parameter)+'=';
        var pars= urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i= pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        url= urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : "");
        return url;
    } else {
        return url;
    }
}

//function to add/update query params
function insertParam(key, value) {
    if (history.pushState) {
        // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1';
        var currentUrlWithOutHash = window.location.origin + window.location.pathname + window.location.search;
        var hash = window.location.hash
        //remove any param for the same key
        var currentUrlWithOutHash = removeURLParameter(currentUrlWithOutHash, key);

        //figure out if we need to add the param with a ? or a &
        var queryStart;
        if(currentUrlWithOutHash.indexOf('?') !== -1){
            queryStart = '&';
        } else {
            queryStart = '?';
        }

        var newurl = currentUrlWithOutHash + queryStart + key + '=' + value + hash
        window.history.pushState({path:newurl},'',newurl);
    }
}

Comments

सेट और डिलीट केnew URLSearchParams() रूप में इसके मूल तरीकों से आपके कार्य कैसे बेहतर हैं ? या तो मामलों में हमें इसे इतिहास के साथ रखना होगाhistory.pushState()

— एलेक्सनिकोनोव

new URLSearchParams()IE के किसी भी संस्करण द्वारा समर्थित नहीं है

— jmona789

धन्यवाद @ jmona789 यह पूरी तरह से मेरे लिए काम करता है और वास्तव में मैं क्या देख रहा था

— mknopf

Answer 3

मैंने महान सफलता के साथ निम्नलिखित जावास्क्रिप्ट लाइब्रेरी का उपयोग किया है:

https://github.com/balupton/jquery-history

यह पुराने ब्राउज़र के लिए HTML5 इतिहास एपीआई के साथ-साथ एक फॉलबैक विधि (# का उपयोग करके) का समर्थन करता है।

यह पुस्तकालय अनिवार्य रूप से `history.pushState 'के आसपास एक पॉलीफ़िल है।

Comments

बहुत बढ़िया! क्या आपने सभी ब्राउज़रों के साथ इसका परीक्षण किया था ??

— सोनिक सोल

मेरे कार्यान्वयन का परीक्षण IE7 +, फ़ायरफ़ॉक्स 3.6+, सफारी 5 और क्रोम 16+ में किया गया था। यह शायद अन्य ब्राउज़रों के साथ भी काम करता है, लेकिन मुझे इसके इस्तेमाल के लिए तैनात कई प्रणालियों में कोई शिकायत नहीं है।

— इयान न्यूजन

महान। तो अभी .. बस एक # के बजाय एक # डाल रहा हूँ। जब मेरे लिए window.location.href लिख रहा है। इसमें वह पृष्ठ पुनः लोड नहीं करता है। मुझे यकीन है कि आईई में यह परीक्षण करने के बाद मैं इसे तोड़ दूंगा .. जिस बिंदु पर मैं आपके द्वारा सुझाए गए पुस्तकालय के साथ जाऊंगा। साभार

— सोनिक सोल

# विधि एक अच्छा है कि इसमें बहुत विस्तृत ब्राउज़र समर्थन है। जब आप उस जानकारी को सर्वर में शामिल करना चाहते हैं, तो चीजें जटिल हो सकती हैं, क्योंकि URL का # हिस्सा ब्राउज़र द्वारा नहीं भेजा गया है। ऐसे तरीके हैं जो लाइब्रेरी को संदर्भित करते हैं। इसके अलावा, एचटीएमएल 5 इतिहास एपीआई का उपयोग करने से आपके URL को समग्र रूप से छोटा करने में मदद मिलती है और राज्य को पुनर्स्थापित करने के लिए कम ग्राहक पक्ष की आवश्यकता होती है।

— इयान न्यूजन

सोशल मीडिया साझा करने के लिए # विधि भी समस्याग्रस्त है; ट्विटर, फेसबुक, और संभवत: अन्य लोग एंकर टैग के साथ अच्छा नहीं खेलते हैं, जब प्रीव्यू या लिंक शेयर करने के लिए बनाते हैं।

— मिर्थ

Answer 4

मैं फ़ैबियो के उत्तर में सुधार करना चाहता हूं और एक फ़ंक्शन बनाना चाहता हूं जो पृष्ठ को फिर से लोड किए बिना URL स्ट्रिंग में कस्टम कुंजी जोड़ता है।

function insertUrlParam(key, value) {
    if (history.pushState) {
        let searchParams = new URLSearchParams(window.location.search);
        searchParams.set(key, value);
        let newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + searchParams.toString();
        window.history.pushState({path: newurl}, '', newurl);
    }
}

Answer 5

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