पृष्ठ रीलोड न करता JavaScript मध्ये URL सुधारणे

पृष्ठ रीलोड न करता JavaScript मध्ये URL सुधारणे
पृष्ठ रीलोड न करता JavaScript मध्ये URL सुधारणे
Arthur Petit
सोमवार, ८ जुलै, २०२४ रोजी २:०९:२३ म.उ.

JavaScript सह डायनॅमिकली URL बदलणे

आधुनिक वेब ॲप्लिकेशन्ससह काम करताना, तुम्हाला कदाचित पेज रीलोड ट्रिगर न करता URL सुधारण्याची गरज भासू शकते. अखंड वापरकर्ता अनुभव तयार करण्यासाठी हे विशेषतः उपयुक्त ठरू शकते.

या मार्गदर्शकामध्ये, आम्ही डोमेन नंतर URL चा भाग बदलण्याच्या पद्धती शोधू, ज्यात तुम्हाला हॅश (#) चिन्हापूर्वीचा भाग ऍक्सेस करण्याची परवानगी देणाऱ्या तंत्रांचा समावेश आहे. हे इच्छित URL सुधारणा साध्य करताना क्रॉस-डोमेन धोरणांचे पालन सुनिश्चित करते.

आज्ञा वर्णन
history.pushState() पृष्ठ रीलोड न करता URL बदलून ब्राउझरच्या सत्र इतिहासाच्या स्टॅकमध्ये नवीन एंट्री जोडते.
window.history.pushState() नवीन राज्य डेटा आणि नवीन URL सह वर्तमान इतिहास प्रविष्टी अद्यतनित करते.
window.location.hash URL चा अँकर भाग मिळवतो किंवा सेट करतो, जो हॅश चिन्ह (#) चे अनुसरण करतो.
function changeURL(newPath) इतिहास API वापरून URL पथ अद्यतनित करणारे कार्य परिभाषित करते.
function updateHash(newHash) URL हॅश अपडेट करणारे फंक्शन परिभाषित करते.

JavaScript मध्ये URL बदलाचे तपशीलवार स्पष्टीकरण

पहिली स्क्रिप्ट वापरते history.pushState() पद्धत, जी इतिहास API चा भाग आहे. हा आदेश विकासकांना ब्राउझरच्या सत्र इतिहासाच्या स्टॅकमध्ये नवीन एंट्री जोडण्याची परवानगी देतो, पृष्ठ रीलोड न करता ॲड्रेस बारमध्ये प्रदर्शित URL प्रभावीपणे बदलतो. स्क्रिप्टमध्ये, १ नवीन मार्ग सेट करते, आणि history.pushState(null, "", newURL); या नवीन मार्गावर URL बदलते. गुंडाळून history.pushState सारख्या फंक्शनमध्ये कमांड function changeURL(newPath), आम्ही आवश्यकतेनुसार URL डायनॅमिकरित्या अपडेट करू शकतो. हे तंत्र विशेषत: सिंगल-पेज ॲप्लिकेशन्स (एसपीए) साठी उपयुक्त आहे जेथे संपूर्ण पृष्ठ रीलोड न करता सामग्री गतिशीलपणे बदलते.

दुसरी स्क्रिप्ट पत्ते URL हॅश वापरून बदलते ५. हे गुणधर्म URL चा अँकर भाग मिळवते किंवा सेट करते जे हॅश चिन्ह (#) चे अनुसरण करते. सेटिंग करून const hashValue = "newSection"; आणि ७, URL हॅश पेज रीलोड न करता #newSection मध्ये बदलते. हा दृष्टीकोन समान पृष्ठामध्ये नेव्हिगेट करण्यासाठी किंवा दस्तऐवजातील विशिष्ट विभागांशी लिंक करण्यासाठी उपयुक्त आहे. याव्यतिरिक्त, कार्य function updateHash(newHash) URL चा हॅश भाग डायनॅमिकरित्या बदलणे सोपे बनवून ही कार्यक्षमता अंतर्भूत करते. दोन्ही स्क्रिप्ट URL मध्ये सुधारणा करण्याचे आणि अनावश्यक पृष्ठ रीलोड टाळून वापरकर्ता अनुभव सुधारण्याचे अखंड मार्ग प्रदान करतात.

रीलोड न करता URL बदलण्यासाठी इतिहास API वापरणे

इतिहास API सह JavaScript

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");

रीलोड न करता URL हॅश हाताळणे

हॅश सुधारित करण्यासाठी JavaScript

१

रीलोड न करता URL सुधारण्यासाठी अतिरिक्त पद्धती शोधत आहे

पृष्ठ रीलोड न करता URL सुधारण्याच्या आणखी एका पैलूमध्ये वापरणे समाविष्ट आहे ९ इतिहास API मधील पद्धत. असताना pushState() नवीन इतिहासाची नोंद जोडते, ९ वर्तमान इतिहास एंट्री सुधारित करते. हे विशेषतः उपयोगी ठरू शकते जेव्हा तुम्ही URL बदलू इच्छित असाल तर अनेक राज्यांसह वापरकर्त्याच्या इतिहासात गोंधळ न घालता. उदाहरणार्थ, जर तुमच्याकडे एकल-पृष्ठ अनुप्रयोग असेल जेथे सामग्री वारंवार बदलत असेल, तर तुम्हाला इतिहासात प्रत्येक बदल न जोडता वर्तमान स्थिती प्रतिबिंबित करण्यासाठी URL अपडेट करू शकता. हे बॅक बटण कार्यक्षमता स्वच्छ आणि वापरकर्त्यासाठी अनुकूल ठेवते.

वापरणे ९, तुम्ही सारखे फंक्शन लिहू शकता changeURL() पण त्याऐवजी कॉल करा history.replaceState() त्याच्या आत. उदाहरणार्थ, १५ वापरू शकतो history.replaceState(null, "", newPath); URL अपडेट करण्यासाठी. हे तंत्र अनावश्यक इतिहास नोंदी न तयार करता URL ला अनुप्रयोगाच्या स्थितीशी समक्रमित ठेवून वापरकर्ता अनुभव सुधारण्यासाठी मौल्यवान आहे. शिवाय, हे ब्राउझरचा इतिहास व्यवस्थापित करण्याचा अधिक कार्यक्षम मार्ग देते, विशेषत: डायनॅमिक वेब अनुप्रयोगांमध्ये.

रीलोड न करता URL बदलण्याबद्दल सामान्य प्रश्न

  1. यांच्यात काय फरक आहे pushState() आणि ९?
  2. pushState() सत्र इतिहास स्टॅकमध्ये नवीन एंट्री जोडते, तर ९ वर्तमान इतिहास एंट्री सुधारित करते.
  3. मी पेज रीलोड न करता URL हॅश बदलू शकतो का?
  4. होय, वापरून ५, तुम्ही पेज रीलोड न करता URL हॅश बदलू शकता.
  5. URL च्या फक्त क्वेरी पॅरामीटर्समध्ये बदल करणे शक्य आहे का?
  6. होय, तुम्ही क्वेरी पॅरामीटर्स वापरून अपडेट करू शकता pushState() किंवा ९ पृष्ठ रीलोड न करता पद्धती.
  7. सह URL सुधारित करते pushState() मागील बटणावर परिणाम होतो?
  8. होय, प्रत्येक कॉलला pushState() नवीन इतिहास एंट्री तयार करते, त्यामुळे बॅक बटण या राज्यांमधून नेव्हिगेट करेल.
  9. मी सर्व ब्राउझरमध्ये या पद्धती वापरू शकतो का?
  10. बहुतेक आधुनिक ब्राउझर हिस्ट्री API चे समर्थन करतात, यासह pushState() आणि ९, परंतु नेहमी सुसंगतता तपासा.
  11. वापरताना मी पॉपस्टेट इव्हेंट कसे हाताळू pushState()?
  12. तुम्ही यासाठी ऐकू शकता popstate सक्रिय इतिहास नोंदीतील बदल हाताळण्यासाठी आणि त्यानुसार UI अद्यतनित करण्यासाठी इव्हेंट.
  13. वापरताना URL स्वरूप चुकीचे असल्यास काय होते pushState()?
  14. URL स्वरूप चुकीचे असल्यास, pushState() एरर टाकेल, त्यामुळे तुमच्या URL योग्यरित्या फॉरमॅट झाल्याची खात्री करा.

विषय गुंडाळणे

JavaScript मध्ये पृष्ठ रीलोड न करता URL संपादीत केल्याने सुगम नेव्हिगेशन तयार करून आणि अनावश्यक पृष्ठ रीलोड टाळून वापरकर्ता अनुभव मोठ्या प्रमाणात सुधारू शकतो. इतिहास API चा वापर करणे pushState() आणि ९ पद्धती विकासकांना ब्राउझरच्या इतिहासात गोंधळ न घालता, ऍप्लिकेशनची स्थिती समक्रमित ठेवून URL डायनॅमिकपणे अद्यतनित करण्याची परवानगी देतात. याव्यतिरिक्त, URL हॅश हाताळणे कार्यक्षम इन-पेज नेव्हिगेशन प्रदान करू शकते. आधुनिक, प्रतिसाद देणारे वेब ॲप्लिकेशन विकसित करण्यासाठी ही तंत्रे समजून घेणे आणि त्याची अंमलबजावणी करणे आवश्यक आहे.