JavaScript रीडायरेक्ट कैसे करें: location.href vs location.replace

वेब पेज को रीडायरेक्ट करने के कई तरीके हैं: क्लाइंट साइड HTML में मेटा टैग का उपयोग करके, और सर्वर साइड HTTP रीडायरेक्ट मेथड्स का उपयोग करके कुछ नाम रखने के लिए। इस आर्टिकल में, हम देखते हैं कि JavaScript का उपयोग करके वेब पेज को कैसे रीडायरेक्ट किया जाए।

दो मेथड्स

JavaScript कोड का उपयोग करके पेज रीडायरेक्शन के दो संभावित तरीके हैं। दोनों में window location ऑब्जेक्ट शामिल है।

href

पहला तरीका location ऑब्जेक्ट पर href प्रॉपर्टी (जो बदले में window ऑब्जेक्ट का हिस्सा है) शामिल करता है। आपको केवल रीडायरेक्ट को संभालना है उस URL को असाइन करके जिसे आप रीडायरेक्ट के लिए जाना चाहते हैं location.href के रूप में। आप इसे एक JavaScript फंक्शन में करते हैं जो पेज लोड होने पर निष्पादित होगा:

<html>
<head>
  <style>
    body { font-family: 'Roboto'; margin: 20px; }
    p { margin: 0; padding: 0; }
  </style>
</head>
<body onload=handleRedirect("https://www.careerkarma.com/blog/html")>
  You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
</body>
<script>
  const handleRedirect = (url) => {
    location.href = url;
  }
</script>
</html>

मैंने डॉक्यूमेंट के नीचे, बॉडी टैग से ठीक पहले एक स्क्रिप्ट टैग जोड़ा है। यहीं हमारा JavaScript जाता है। handleRedirect नामक एक फंक्शन का एक पैरामीटर url कहलाता है। हम location.href को उस url के मान पर असाइन करते हैं।

डॉक्यूमेंट के बॉडी के शीर्ष पर, हमारे पास एक onload इवेंट है। यह onload इवेंट उस JavaScript फंक्शन को निष्पादित करता है जिसे हम इसे असाइन करते हैं। यहां, हमने वह URL पास किया है जिसे हम चाहते हैं कि यह जाए। रीडायरेक्ट तुरंत होता है और करियर कर्मा के ब्लॉग पोस्ट्स के HTML भाग पर जाता है।

यदि आप पेज रीडायरेक्ट होने से पहले थोड़ा विराम जोड़ना चाहते हैं, तो आप setTimeout फंक्शन का उपयोग करके ऐसा कर सकते हैं। यहां बताया गया है कि यह कैसे करना है:

const handleRedirect = (url) => {
  setTimeout(() => {
    location.href = url;
  }, 2000);
}

बाकी सब कुछ वही रहता है।

यह मेथड मूल पेज को हिस्ट्री स्टैक में जोड़ता है। यह ब्राउज़र के बैक बटन द्वारा एक्सेसिबल है। यदि आप इसके बजाय URL को बदलना पसंद करते हैं तो एक और मेथड है – हम अगले को देखते हैं!

replace

हमारे द्वारा ऊपर बनाए गए मेथड के विपरीत जो location ऑब्जेक्ट पर एक प्रॉपर्टी को एक नया URL असाइन करता है, location.replace() एक मेथड है जो मूल URL को आपके द्वारा निर्दिष्ट URL से असाइन और प्रतिस्थापित करता है।

यह मेथड मूल URL को ब्राउज़र के स्टैक पर नहीं रखता, यह गंतव्य को रीडायरेक्टेड URL से प्रतिस्थापित करता है। यहां बताया गया है कि यह कैसे करना है:

<html>
<head>
  <style>
    body { font-family: 'Roboto'; margin: 20px; }
    p { margin: 0; padding: 0; }
  </style>
</head>
<body onload=location.replace("https://www.careerkarma.com/blog/html")>
  You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
</body>
</html>

जैसा कि आप देख सकते हैं, इसके लिए हमें स्क्रिप्ट टैग की बिल्कुल भी आवश्यकता नहीं है। जब डॉक्यूमेंट लोड होता है, तो यह पैरेंथेसिस में साइट पर हमें निर्देशित करने वाले location.replace मेथड को चलाता है।

बस इतना ही! अब आप JavaScript का उपयोग करके एक नए वेब पेज पर रीडायरेक्ट कर सकते हैं।