జావాస్క్రిప్ట్ ఉపయోగించి వెబ్ పేజీని రీలోడ్ చేయకుండా URLని సవరించే పద్ధతులను ఈ కథనం వివరిస్తుంది.
పేజీని రీలోడ్ చేయకుండా జావాస్క్రిప్ట్‌లో URLని సవరించడం/మార్చడం ఎలా?
వెబ్ పేజీని రీలోడ్ చేయకుండా URLని సవరించడానికి, కింది జావాస్క్రిప్ట్ ముందే నిర్వచించిన పద్ధతిని ఉపయోగించండి:
విధానం 1: “pushState()” పద్ధతిని ఉపయోగించి పేజీని రీలోడ్ చేయకుండా జావాస్క్రిప్ట్‌లో URLని సవరించండి
వెబ్ పేజీని రీలోడ్ చేయకుండా URLని సవరించడానికి, ' pushState() ” పద్ధతి. ఇది ఒక లక్షణం లేదా ముందే నిర్వచించబడిన పద్ధతి చరిత్ర వస్తువు ” ఇది పేజీని నావిగేట్ చేయకుండా లేదా రిఫ్రెష్ చేయకుండా బ్రౌజర్ చరిత్రను మార్చడానికి అనుమతిస్తుంది. ఇది చరిత్ర స్టాక్‌ను జోడిస్తుంది లేదా సవరించింది మరియు కొత్త పేజీని లోడ్ చేయదు. ఈ విధానాన్ని ఉపయోగించడం ద్వారా, మీరు బ్రౌజర్ యొక్క చరిత్ర స్టాక్‌కు కొత్త ఎంట్రీని జోడించడం ద్వారా పేజీల మధ్య ముందుకు వెనుకకు మారవచ్చు.
వాక్యనిర్మాణం
“pushState()” పద్ధతి కోసం ఇచ్చిన సింటాక్స్‌ని అనుసరించండి:
కిటికీ. చరిత్ర . pushState ( రాష్ట్రం , శీర్షిక , url ) ;
ఇక్కడ:
- ' రాష్ట్రం ” కొత్త చరిత్ర ప్రవేశాన్ని సూచిస్తుంది.
- ' శీర్షిక ” అనేది బ్రౌజర్ యొక్క టైటిల్ బార్ వద్ద చూపబడే నిర్దిష్ట వచనం.
- ' url ” భర్తీ చేయబడిన URLని కొత్త ఎంట్రీగా సూచిస్తుంది.
ఉదాహరణ
HTML ఫైల్‌లో, '' అని పిలిచే నాలుగు బటన్‌లను సృష్టించండి సవరించుUrl() బటన్ క్లిక్ పై ఫంక్షన్:
< బటన్ క్లిక్ చేయండి = 'modifyUrl('CSS ట్యుటోరియల్', 'CSSTutorial.html');' > 2 బటన్ >
< బటన్ క్లిక్ చేయండి = 'modifyUrl('JavaScript ట్యుటోరియల్', 'JavaScriptTutorial.html');' > 3 బటన్ >
< బటన్ క్లిక్ చేయండి = 'modifyUrl('జావా ట్యుటోరియల్', 'JavaTutorial.html');' > 4 బటన్ >
ఒక ఫంక్షన్ నిర్వచించండి ' సవరించుUrl() ” జావాస్క్రిప్ట్ ఫైల్‌లోని బటన్ క్లిక్‌పై ట్రిగ్గర్ అవుతుంది. ఇది రెండు పారామితులను తీసుకుంటుంది, ' శీర్షిక ' ఇంకా ' url ”. బటన్ క్లిక్‌పై పద్ధతిని పిలిచినప్పుడు, “శీర్షిక” మరియు “url” ఆర్గ్యుమెంట్‌లుగా పాస్ చేయబడతాయి. 'రకాన్ని తనిఖీ చేయండి pushState 'చరిత్ర వస్తువు, అది కాకపోతే' నిర్వచించబడలేదు ”. అప్పుడు, కాల్ చేయండి ' history.pushState() URLని మార్చే పద్ధతి:
ఫంక్షన్ సవరించుUrl ( శీర్షిక , url ) {
ఉంటే ( రకం ( చరిత్ర. pushState ) != 'నిర్వచించబడని' ) {
ఉంది obj = {
శీర్షిక : శీర్షిక ,
Url : url
} ;
చరిత్ర. pushState ( obj , obj శీర్షిక , obj Url ) ;
}
}
ప్రతి బటన్ క్లిక్‌లో, పేజీని రీలోడ్ చేయకుండానే URL విజయవంతంగా మార్చబడుతుందని చూడవచ్చు:
పై అవుట్‌పుట్‌లో, ఎగువ ఎడమవైపు ఉన్న వెనుక బాణం బటన్‌ను మీరు చూడవచ్చు ( <- ) బటన్‌పై క్లిక్ చేస్తున్నప్పుడు ప్రారంభించబడుతుంది, ఇది మీరు ముందుకు వెనుకకు నావిగేట్ చేయవచ్చని సూచిస్తుంది ఎందుకంటే “ pushState() ” పద్ధతి చరిత్ర స్టాక్‌లో కొత్త URLని జోడిస్తుంది.
విధానం 2: “replaceState()” పద్ధతిని ఉపయోగించి పేజీని రీలోడ్ చేయకుండా జావాస్క్రిప్ట్‌లో URLని సవరించండి
ఉపయోగించడానికి ' భర్తీ రాష్ట్రం() ” వెబ్ పేజీని రీలోడ్ చేయకుండా URLని సవరించే పద్ధతి. ఇది కూడా ఒక లక్షణం ' చరిత్ర వస్తువు ” అయితే ఇది చరిత్ర స్టాక్‌కు కొత్త ఎంట్రీని జోడించదు. ఇది బ్రౌజర్ చరిత్ర యొక్క ప్రస్తుత స్థితిని మారుస్తుంది మరియు దానిని కొత్త స్థితితో భర్తీ చేస్తుంది. ఈ విధానాన్ని ఉపయోగించడం ద్వారా, మీరు పేజీల మధ్య ముందుకు వెనుకకు మారలేరు.
వాక్యనిర్మాణం
ఇవ్వబడిన వాక్యనిర్మాణం “replaceState()” పద్ధతి కోసం ఉపయోగించబడుతుంది:
ఉదాహరణ
నిర్వచించిన ఫంక్షన్‌లో, కాల్ చేయండి భర్తీ రాష్ట్రం() పేజీని రీలోడ్ చేయకుండా లేదా నావిగేట్ చేయకుండా బటన్ క్లిక్‌పై URLని భర్తీ చేసే పద్ధతి:
ఉంటే ( రకం ( చరిత్ర. రాష్ట్రాన్ని భర్తీ చేయండి ) != 'నిర్వచించబడని' ) {
ఉంది obj = {
శీర్షిక : శీర్షిక ,
Url : url
} ;
చరిత్ర. రాష్ట్రాన్ని భర్తీ చేయండి ( obj , obj శీర్షిక , obj Url ) ;
}
}
ప్రతి బటన్ క్లిక్‌లో, URL మార్చబడిందని అవుట్‌పుట్ సూచిస్తుంది మరియు వెనుక బాణం బటన్ నిలిపివేయబడినందున వెనుకకు వెళ్లడానికి నావిగేట్ చేసే ఎంపిక లేదు:
మేము జావాస్క్రిప్ట్‌లో పేజీని రీలోడ్ చేయకుండానే URL యొక్క సవరణకు సంబంధించిన అన్ని ముఖ్యమైన సమాచారాన్ని అందించాము.
ముగింపు
వెబ్ పేజీని రిఫ్రెష్ చేయకుండా URLని సవరించడానికి/మార్చడానికి, ' pushState() 'పద్ధతి లేదా' భర్తీ రాష్ట్రం() ” పద్ధతి. “pushState()” పద్ధతి కొత్త URLని చరిత్ర స్టాక్‌లో కొత్త ఎంట్రీగా జోడిస్తుంది మరియు వినియోగదారులను ముందుకు వెనుకకు నావిగేట్ చేయడానికి అనుమతిస్తుంది. “replaceState()” పద్ధతి URLని భర్తీ చేస్తుంది మరియు వెనుక పేజీకి తరలించడాన్ని అనుమతించదు. జావాస్క్రిప్ట్‌ని ఉపయోగించి వెబ్ పేజీని రీలోడ్ చేయకుండా URLని సవరించే పద్ధతులను ఈ కథనం వివరించింది.