यह लेख जावास्क्रिप्ट का उपयोग करके वेब पेज को फिर से लोड किए बिना URL को संशोधित करने के तरीकों का वर्णन करेगा।
पृष्ठ को पुनः लोड किए बिना जावास्क्रिप्ट में URL को कैसे संशोधित/बदलें?
वेब पेज को पुनः लोड किए बिना URL को संशोधित करने के लिए, निम्नलिखित जावास्क्रिप्ट पूर्वनिर्धारित विधि का उपयोग करें:
विधि 1: 'पुशस्टेट ()' विधि का उपयोग करके पृष्ठ को पुनः लोड किए बिना जावास्क्रिप्ट में URL को संशोधित करें
वेब पेज को पुनः लोड किए बिना URL को संशोधित करने के लिए, 'का उपयोग करें' पुशस्टेट () ' तरीका। यह एक विशेषता या 'की पूर्वनिर्धारित विधि है' इतिहास वस्तु ” जो पृष्ठ को नेविगेट या रीफ्रेश किए बिना ब्राउज़र इतिहास को बदलने की अनुमति देता है। यह केवल इतिहास स्टैक को जोड़ता या संशोधित करता है और कोई नया पृष्ठ लोड नहीं करता है। इस दृष्टिकोण का उपयोग करके, आप ब्राउज़र के इतिहास स्टैक में एक नई प्रविष्टि जोड़कर पृष्ठों के बीच आगे और पीछे स्विच कर सकते हैं।
वाक्य - विन्यास
'पुशस्टेट ()' विधि के लिए दिए गए सिंटैक्स का पालन करें:
खिड़की। इतिहास . pushState ( राज्य , शीर्षक , यूआरएल ) ;
यहाँ:
- ' राज्य ” नई इतिहास प्रविष्टि का प्रतिनिधित्व करता है।
- ' शीर्षक ” एक विशेष टेक्स्ट है जिसे ब्राउजर के टाइटल बार में दिखाया जा सकता है।
- ' यूआरएल 'बदले गए URL को एक नई प्रविष्टि के रूप में इंगित करता है।
उदाहरण
एक HTML फ़ाइल में, चार बटन बनाएँ जो “ संशोधित यूआरएल () बटन क्लिक पर कार्य करें:
< बटन ऑनक्लिक = 'modifyUrl ('सीएसएस ट्यूटोरियल', 'CSSTutorial.html');' > 2 बटन >
< बटन ऑनक्लिक = 'modifyUrl ('जावास्क्रिप्ट ट्यूटोरियल', 'JavaScriptTutorial.html');' > 3 बटन >
< बटन ऑनक्लिक = 'modifyUrl ('जावा ट्यूटोरियल', 'JavaTutorial.html');' > 4 बटन >
एक समारोह परिभाषित करें ' संशोधित यूआरएल () ” एक जावास्क्रिप्ट फ़ाइल में जो बटन क्लिक पर ट्रिगर होगी। यह दो पैरामीटर लेता है, ' शीर्षक ' और यह ' यूआरएल ”। जब बटन क्लिक पर विधि को कॉल किया जाता है, तो 'शीर्षक' और 'यूआरएल' को तर्क के रूप में पारित किया जाएगा। के प्रकार की जाँच करें ' pushState 'इतिहास वस्तु का, यदि यह नहीं है' अपरिभाषित ”। फिर, कॉल करें ' इतिहास.पुशस्टेट () ” URL बदलने की विधि:
समारोह संशोधित यूआरएल ( शीर्षक , यूआरएल ) {
अगर ( के प्रकार ( इतिहास। pushState ) != 'अपरिभाषित' ) {
था obj = {
शीर्षक : शीर्षक ,
यूआरएल : यूआरएल
} ;
इतिहास। pushState ( obj , obj. शीर्षक , obj. यूआरएल ) ;
}
}
यह देखा जा सकता है कि प्रत्येक बटन क्लिक पर, पृष्ठ को पुनः लोड किए बिना URL सफलतापूर्वक बदल दिया जाएगा:
उपरोक्त आउटपुट में, आप देख सकते हैं कि ऊपर बाईं ओर बैक एरो बटन ( <- ) बटन पर क्लिक करते समय सक्षम है, यह इंगित करता है कि आप आगे और पीछे नेविगेट कर सकते हैं क्योंकि ' पुशस्टेट () ” विधि इतिहास स्टैक पर नया URL जोड़ती है।
विधि 2: 'रिप्लेसस्टेट ()' विधि का उपयोग करके पृष्ठ को पुनः लोड किए बिना जावास्क्रिप्ट में URL को संशोधित करें
उपयोग ' रिप्लेसस्टेट () ” वेब पेज को फिर से लोड किए बिना URL को संशोधित करने की विधि। यह 'की एक विशेषता भी है इतिहास वस्तु ” लेकिन यह इतिहास स्टैक में नई प्रविष्टि नहीं जोड़ेगा। यह ब्राउज़र के इतिहास की मौजूदा स्थिति को बदल देता है और इसे एक नए राज्य से बदल देता है। इस दृष्टिकोण का उपयोग करके, आप पृष्ठों के बीच आगे और पीछे स्विच नहीं कर सकते।
वाक्य - विन्यास
दिए गए सिंटैक्स का उपयोग 'रिप्लेसस्टेट ()' विधि के लिए किया जाता है:
उदाहरण
परिभाषित फ़ंक्शन में, कॉल करें ' रिप्लेसस्टेट () बटन पर URL को बदलने के लिए विधि पृष्ठ को पुनः लोड या नेविगेट किए बिना क्लिक करें:
अगर ( के प्रकार ( इतिहास। replaceState ) != 'अपरिभाषित' ) {
था obj = {
शीर्षक : शीर्षक ,
यूआरएल : यूआरएल
} ;
इतिहास। replaceState ( obj , obj. शीर्षक , obj. यूआरएल ) ;
}
}
आउटपुट इंगित करता है कि प्रत्येक बटन के क्लिक पर, URL बदल दिया गया है और वापस जाने के लिए नेविगेट करने का कोई विकल्प नहीं है क्योंकि बैक एरो बटन अक्षम है:
हमने जावास्क्रिप्ट में पृष्ठ को फिर से लोड किए बिना URL के संशोधन से संबंधित सभी आवश्यक जानकारी प्रदान की है।
निष्कर्ष
वेब पेज को रिफ्रेश किए बिना URL को संशोधित/बदलने के लिए, ' का उपयोग करें। पुशस्टेट () 'विधि या' रिप्लेसस्टेट () ' तरीका। 'पुशस्टेट ()' विधि नए URL को एक इतिहास स्टैक में एक नई प्रविष्टि के रूप में जोड़ती है और उपयोगकर्ताओं को आगे और पीछे नेविगेट करने की अनुमति देती है। जबकि “replaceState ()” विधि URL को बदल देती है और पिछले पृष्ठ पर जाने की अनुमति नहीं देती है। इस लेख में जावास्क्रिप्ट का उपयोग करके वेब पेज को फिर से लोड किए बिना URL को संशोधित करने की विधियों का वर्णन किया गया है।