பக்கத்தை மீண்டும் ஏற்றாமல் ஜாவாஸ்கிரிப்டில் URL ஐ மாற்றுகிறது

ஜாவாஸ்கிரிப்ட் மூலம் URL ஐ மாறும் வகையில் மாற்றுதல்

நவீன இணையப் பயன்பாடுகளுடன் பணிபுரியும் போது, ​​பக்கத்தை மீண்டும் ஏற்றுவதைத் தூண்டாமல் URL ஐ மாற்ற வேண்டிய அவசியம் உங்களுக்கு இருக்கலாம். தடையற்ற பயனர் அனுபவத்தை உருவாக்க இது மிகவும் பயனுள்ளதாக இருக்கும்.

இந்த வழிகாட்டியில், டொமைனுக்குப் பிறகு URL இன் பகுதியை மாற்றுவதற்கான முறைகளை ஆராய்வோம், இதில் ஹாஷ் (#) சின்னத்திற்கு முன் பகுதியை அணுக உங்களை அனுமதிக்கும் நுட்பங்கள் அடங்கும். விரும்பிய URL மாற்றத்தை அடையும் போது, ​​குறுக்கு டொமைன் கொள்கைகளுக்கு இணங்குவதை இது உறுதி செய்கிறது.

ஜாவாஸ்கிரிப்டில் URL மாற்றம் பற்றிய விரிவான விளக்கம்

முதல் ஸ்கிரிப்ட் பயன்படுத்துகிறது history.pushState() முறை, இது வரலாற்று API இன் பகுதியாகும். இந்தக் கட்டளையானது, உலாவியின் அமர்வு வரலாற்று அடுக்கில் புதிய உள்ளீட்டைச் சேர்க்க டெவலப்பர்களை அனுமதிக்கிறது, பக்கத்தை மீண்டும் ஏற்றாமல் முகவரிப் பட்டியில் காட்டப்படும் URLஐ திறம்பட மாற்றுகிறது. திரைக்கதையில், const newURL = "/page2.php"; புதிய பாதையை அமைக்கிறது, மற்றும் history.pushState(null, "", newURL); இந்த புதிய பாதைக்கு URL ஐ மாற்றுகிறது. போர்த்துவதன் மூலம் history.pushState போன்ற ஒரு செயல்பாட்டில் கட்டளை function changeURL(newPath), தேவைக்கேற்ப URLஐ மாறும் வகையில் புதுப்பிக்கலாம். முழுப் பக்கத்தையும் மறுஏற்றம் செய்யாமல் உள்ளடக்கம் மாறும் வகையில் ஒற்றைப் பக்க பயன்பாடுகளுக்கு (SPAs) இந்த நுட்பம் மிகவும் பயனுள்ளதாக இருக்கும்.

இரண்டாவது ஸ்கிரிப்ட் முகவரிகள் URL ஹாஷை மாற்றுகிறது window.location.hash. இந்த சொத்து ஹாஷ் சின்னத்தை (#) பின்பற்றும் URL இன் நங்கூர பகுதியைப் பெறுகிறது அல்லது அமைக்கிறது. அமைப்பதன் மூலம் const hashValue = "newSection"; மற்றும் window.location.hash = hashValue;, பக்கத்தை மீண்டும் ஏற்றாமலேயே URL ஹாஷ் #newSection ஆக மாறும். இந்த அணுகுமுறை ஒரே பக்கத்திற்குள் செல்லவும் அல்லது ஆவணத்தில் உள்ள குறிப்பிட்ட பிரிவுகளுடன் இணைக்கவும் பயனுள்ளதாக இருக்கும். கூடுதலாக, செயல்பாடு function updateHash(newHash) இந்த செயல்பாட்டை இணைக்கிறது, URL இன் ஹாஷ் பகுதியை மாறும் வகையில் மாற்றுவதை எளிதாக்குகிறது. இரண்டு ஸ்கிரிப்ட்களும் 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");

மறுஏற்றம் செய்யாமல் URL ஐ மாற்ற கூடுதல் முறைகளை ஆராய்தல்

பக்கத்தை மறுஏற்றம் செய்யாமல் URL ஐ மாற்றியமைப்பதில் மற்றொரு அம்சம் உள்ளது replaceState() வரலாறு API இலிருந்து முறை. போது pushState() புதிய வரலாற்றுப் பதிவைச் சேர்க்கிறது, replaceState() தற்போதைய வரலாறு உள்ளீட்டை மாற்றியமைக்கிறது. பல நிலைகளுடன் பயனரின் வரலாற்றை ஒழுங்கீனம் செய்யாமல் URL ஐ மாற்ற விரும்பும் போது இது மிகவும் பயனுள்ளதாக இருக்கும். எடுத்துக்காட்டாக, உள்ளடக்கம் அடிக்கடி மாறும் ஒற்றைப் பக்க பயன்பாடு உங்களிடம் இருந்தால், வரலாற்றில் ஒவ்வொரு மாற்றத்தையும் சேர்க்காமல் தற்போதைய நிலையைப் பிரதிபலிக்கும் வகையில் URLஐப் புதுப்பிக்க வேண்டும். இது பின் பொத்தான் செயல்பாட்டை சுத்தமாகவும், பயனர்களுக்கு ஏற்றதாகவும் வைத்திருக்கிறது.

உபயோகிக்க replaceState(), போன்ற ஒரு செயல்பாட்டை நீங்கள் எழுதலாம் changeURL() ஆனால் அதற்கு பதிலாக அழைக்கவும் history.replaceState() அதன் உள்ளே. உதாரணமாக, function replaceURL(newPath) பயன்படுத்த முடியும் history.replaceState(null, "", newPath); URL ஐ புதுப்பிக்க. தேவையற்ற வரலாற்று உள்ளீடுகளை உருவாக்காமல், பயன்பாட்டின் நிலையுடன் URL ஐ ஒத்திசைப்பதன் மூலம் பயனர் அனுபவத்தை மேம்படுத்துவதற்கு இந்த நுட்பம் மதிப்புமிக்கது. மேலும், உலாவியின் வரலாற்றை, குறிப்பாக டைனமிக் இணையப் பயன்பாடுகளில் நிர்வகிக்க மிகவும் திறமையான வழியை இது வழங்குகிறது.