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

Question

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

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

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

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

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

अद्यतन इस विधि पाया:

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

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

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

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

//function to remove query params form a url 
function removeURLParameter(url, parameter) { 
    //prefer 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 insertParam(key, value) { 
    if (history.pushState) { 
     // var newurl = window.location.protocol + "//" + window.location.host + search.pathname + '?myNewUrlQuery=1'; 
     var currentUrl = window.location.href; 
     //remove any param for the same key 
     var currentUrl = removeURLParameter(currentUrl, key); 

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

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