पृष्ठ को पुनः लोड किए बिना जावास्क्रिप्ट में यूआरएल को संशोधित करना

जावास्क्रिप्ट के साथ यूआरएल को गतिशील रूप से बदलना

आधुनिक वेब अनुप्रयोगों के साथ काम करते समय, आपको पृष्ठ पुनः लोड किए बिना यूआरएल को संशोधित करने की आवश्यकता हो सकती है। यह सहज उपयोगकर्ता अनुभव बनाने के लिए विशेष रूप से उपयोगी हो सकता है।

इस गाइड में, हम डोमेन के बाद यूआरएल के हिस्से को बदलने के तरीकों का पता लगाएंगे, जिसमें ऐसी तकनीकें भी शामिल हैं जो आपको हैश (#) प्रतीक से पहले वाले हिस्से तक पहुंचने की अनुमति देती हैं। यह वांछित यूआरएल संशोधन प्राप्त करते समय क्रॉस-डोमेन नीतियों का अनुपालन सुनिश्चित करता है।

जावास्क्रिप्ट में यूआरएल संशोधन की विस्तृत व्याख्या

पहली स्क्रिप्ट का उपयोग करता है history.pushState() विधि, जो इतिहास एपीआई का हिस्सा है। यह कमांड डेवलपर्स को ब्राउज़र के सत्र इतिहास स्टैक में एक नई प्रविष्टि जोड़ने की अनुमति देता है, जो पृष्ठ को पुनः लोड किए बिना एड्रेस बार में प्रदर्शित यूआरएल को प्रभावी ढंग से बदलता है। स्क्रिप्ट में, const newURL = "/page2.php"; नया रास्ता तय करता है, और history.pushState(null, "", newURL); URL को इस नए पथ में बदल देता है। लपेटकर history.pushState जैसे किसी फ़ंक्शन में कमांड function changeURL(newPath), हम आवश्यकतानुसार यूआरएल को गतिशील रूप से अपडेट कर सकते हैं। यह तकनीक विशेष रूप से एकल-पृष्ठ अनुप्रयोगों (एसपीए) के लिए उपयोगी है जहां सामग्री पूरे पृष्ठ को पुनः लोड किए बिना गतिशील रूप से बदलती है।

दूसरी स्क्रिप्ट यूआरएल हैश का उपयोग करके बदलने का पता लगाती है window.location.hash. यह प्रॉपर्टी यूआरएल के एंकर भाग को प्राप्त या सेट करती है जो हैश प्रतीक (#) का अनुसरण करता है। व्यवस्थित करके const hashValue = "newSection"; और window.location.hash = hashValue;, पृष्ठ को पुनः लोड किए बिना URL हैश #newSection में बदल जाता है। यह दृष्टिकोण एक ही पृष्ठ पर नेविगेट करने या किसी दस्तावेज़ के भीतर विशिष्ट अनुभागों को लिंक करने के लिए उपयोगी है। इसके अतिरिक्त, फ़ंक्शन function updateHash(newHash) इस कार्यक्षमता को संपुटित करता है, जिससे URL के हैश भाग को गतिशील रूप से बदलना आसान हो जाता है। दोनों स्क्रिप्ट यूआरएल को संशोधित करने और अनावश्यक पृष्ठ पुनः लोड से बचकर उपयोगकर्ता अनुभव को बेहतर बनाने के सहज तरीके प्रदान करती हैं।

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

यूआरएल को पुनः लोड किए बिना संशोधित करने के लिए अतिरिक्त तरीकों की खोज

पृष्ठ को पुनः लोड किए बिना यूआरएल को संशोधित करने के एक अन्य पहलू में इसका उपयोग करना शामिल है replaceState() इतिहास एपीआई से विधि। जबकि pushState() एक नई इतिहास प्रविष्टि जोड़ता है, replaceState() वर्तमान इतिहास प्रविष्टि को संशोधित करता है। यह विशेष रूप से तब उपयोगी हो सकता है जब आप कई राज्यों के साथ उपयोगकर्ता के इतिहास को अव्यवस्थित किए बिना यूआरएल बदलना चाहते हैं। उदाहरण के लिए, यदि आपके पास एक एकल-पृष्ठ एप्लिकेशन है जहां सामग्री बार-बार बदलती है, तो आप इतिहास में प्रत्येक परिवर्तन को जोड़े बिना वर्तमान स्थिति को प्रतिबिंबित करने के लिए यूआरएल को अपडेट करना चाहेंगे। यह बैक बटन की कार्यक्षमता को साफ़ और उपयोगकर्ता के अनुकूल रखता है।

उपयोग करने के लिए replaceState(), आप के समान एक फ़ंक्शन लिख सकते हैं changeURL() लेकिन इसके बजाय कॉल करें history.replaceState() इसके अंदर। उदाहरण के लिए, function replaceURL(newPath) उपयोग कर सकते हैं history.replaceState(null, "", newPath); यूआरएल अपडेट करने के लिए. यह तकनीक अनावश्यक इतिहास प्रविष्टियाँ बनाए बिना यूआरएल को एप्लिकेशन की स्थिति के साथ समन्वयित रखकर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए मूल्यवान है। इसके अलावा, यह ब्राउज़र के इतिहास को प्रबंधित करने का एक अधिक कुशल तरीका प्रदान करता है, विशेष रूप से गतिशील वेब अनुप्रयोगों में।