പേജ് റീലോഡ് ചെയ്യാതെ തന്നെ ജാവാസ്ക്രിപ്റ്റിൽ 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 അപ്ഡേറ്റ് ചെയ്യാൻ. അനാവശ്യ ചരിത്ര എൻട്രികൾ സൃഷ്‌ടിക്കാതെ, ആപ്ലിക്കേഷൻ്റെ അവസ്ഥയുമായി യുആർഎൽ സമന്വയിപ്പിച്ച് ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിന് ഈ സാങ്കേതികത വിലപ്പെട്ടതാണ്. കൂടാതെ, ബ്രൗസറിൻ്റെ ചരിത്രം, പ്രത്യേകിച്ച് ഡൈനാമിക് വെബ് ആപ്ലിക്കേഷനുകളിൽ കൈകാര്യം ചെയ്യുന്നതിനുള്ള കൂടുതൽ കാര്യക്ഷമമായ മാർഗം ഇത് വാഗ്ദാനം ചെയ്യുന്നു.