પૃષ્ઠને ફરીથી લોડ કર્યા વિના JavaScript માં URL ને સંશોધિત કરવું

JavaScript વડે ડાયનેમિકલી URL ને બદલવું

આધુનિક વેબ એપ્લીકેશનો સાથે કામ કરતી વખતે, તમે તમારી જાતને પૃષ્ઠ ફરીથી લોડ કર્યા વિના URL ને સંશોધિત કરવાની જરૂર અનુભવી શકો છો. આ એક સીમલેસ વપરાશકર્તા અનુભવ બનાવવા માટે ખાસ કરીને ઉપયોગી થઈ શકે છે.

આ માર્ગદર્શિકામાં, અમે ડોમેન પછી URL ના ભાગને બદલવા માટેની પદ્ધતિઓનું અન્વેષણ કરીશું, જેમાં એવી તકનીકોનો સમાવેશ થાય છે જે તમને હેશ (#) પ્રતીક પહેલાંના ભાગને ઍક્સેસ કરવાની મંજૂરી આપે છે. આ ઇચ્છિત URL ફેરફાર હાંસલ કરતી વખતે ક્રોસ-ડોમેન નીતિઓનું પાલન સુનિશ્ચિત કરે છે.

JavaScript માં URL ફેરફારની વિગતવાર સમજૂતી

પ્રથમ સ્ક્રિપ્ટનો ઉપયોગ કરે છે history.pushState() પદ્ધતિ, જે ઇતિહાસ API નો ભાગ છે. આ આદેશ વિકાસકર્તાઓને બ્રાઉઝરના સત્ર ઇતિહાસ સ્ટેકમાં નવી એન્ટ્રી ઉમેરવાની મંજૂરી આપે છે, પૃષ્ઠને ફરીથી લોડ કર્યા વિના સરનામાં બારમાં પ્રદર્શિત URL ને અસરકારક રીતે બદલીને. સ્ક્રિપ્ટમાં, const newURL = "/page2.php"; નવો માર્ગ સુયોજિત કરે છે, અને history.pushState(null, "", newURL); આ નવા પાથ પર URL ને બદલે છે. વીંટાળીને history.pushState જેવા કાર્યમાં આદેશ function changeURL(newPath), અમે જરૂર મુજબ URL ને ગતિશીલ રીતે અપડેટ કરી શકીએ છીએ. આ ટેકનિક ખાસ કરીને સિંગલ-પેજ એપ્લિકેશન્સ (એસપીએ) માટે ઉપયોગી છે જ્યાં સમગ્ર પૃષ્ઠને ફરીથી લોડ કર્યા વિના સામગ્રી ગતિશીલ રીતે બદલાય છે.

બીજી સ્ક્રિપ્ટ એડ્રેસનો ઉપયોગ કરીને 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 ને એપ્લિકેશનની સ્થિતિ સાથે સુમેળમાં રાખીને વપરાશકર્તા અનુભવને સુધારવા માટે આ તકનીક મૂલ્યવાન છે. વધુમાં, તે બ્રાઉઝરના ઇતિહાસને મેનેજ કરવાની વધુ કાર્યક્ષમ રીત પ્રદાન કરે છે, ખાસ કરીને ડાયનેમિક વેબ એપ્લિકેશન્સમાં.