Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट रीडायरेक्ट कैसे करें

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

दो तरीके

पृष्ठ पुनर्निर्देशन के लिए जावास्क्रिप्ट कोड का उपयोग करने के दो संभावित तरीके हैं। दोनों में विंडो लोकेशन ऑब्जेक्ट शामिल है।

href

पहले तरीके में स्थान वस्तु पर href संपत्ति शामिल है (जो बदले में, विंडो ऑब्जेक्ट का हिस्सा है)। केवल एक चीज जो आपको करनी है वह है उस URL को निर्दिष्ट करके पुनर्निर्देशन को संभालना जिसे आप पुनर्निर्देशित करने के लिए स्थान के रूप में जाना चाहते हैं। href। आप इसे एक जावास्क्रिप्ट फ़ंक्शन में करते हैं जो पेज लोड होने पर निष्पादित होगा:

 <शैली> बॉडी { फॉन्ट-फ़ैमिली:'रोबोटो'; मार्जिन:20px; } पी { मार्जिन:0; पैडिंग:0; }    आपको https://www.careerkarma.com/blog/html।
 कृपया इस लिंक पर क्लिक करें यदि पांच सेकंड में रीडायरेक्ट नहीं किया जाता है  

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

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

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

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

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

यह विधि मूल पृष्ठ को इतिहास स्टैक में जोड़ती है। यह ब्राउज़र के बैक बटन द्वारा पहुँचा जा सकता है। यूआरएल को बदलने के लिए एक और तरीका है अगर आप इसके बजाय ऐसा करना पसंद करते हैं - हम अगले एक को देखते हैं!

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

बदलें

हमारे द्वारा ऊपर बनाई गई विधि के विपरीत, जो स्थान वस्तु पर एक संपत्ति के लिए एक नया URL निर्दिष्ट करती है, location.replace() एक ऐसी विधि है जो मूल URL को निर्दिष्ट करती है और आपके द्वारा निर्दिष्ट URL से बदल देती है।

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

 <शैली> बॉडी { फॉन्ट-फ़ैमिली:'रोबोटो'; मार्जिन:20px; } पी { मार्जिन:0; पैडिंग:0; }    आपको https://www.careerkarma.com/blog/html।
 कृपया इस लिंक पर क्लिक करें यदि पांच सेकंड में रीडायरेक्ट नहीं किया जाता है  

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

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


  1. जावास्क्रिप्ट - एक यूआरएल रीडायरेक्ट करें

    जावास्क्रिप्ट का उपयोग करके किसी URL को पुनर्निर्देशित करने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  1. जावास्क्रिप्ट के साथ दूसरे वेबपेज पर रीडायरेक्ट कैसे करें?

    जावास्क्रिप्ट का उपयोग करके किसी अन्य वेबपेज पर रीडायरेक्ट करने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <h1>Redirect to a Webpage Example</h1> <button class="redirectBtn">Redirect</button> <h2>Click the above button to

  1. जावास्क्रिप्ट का उपयोग करके URL ऑब्जेक्ट कैसे बनाएं?

    जावास्क्रिप्ट का उपयोग करके URL ऑब्जेक्ट बनाने के लिए निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&g