Ilalarawan ng artikulong ito ang mga paraan para sa pagbabago ng URL nang hindi nire-reload ang web page gamit ang JavaScript.
Paano Baguhin/Baguhin ang URL sa JavaScript Nang Hindi Nire-reload ang Pahina?
Upang baguhin ang URL nang hindi nire-reload ang web page, gamitin ang sumusunod na paunang natukoy na pamamaraan ng JavaScript:
Paraan 1: Baguhin ang URL sa JavaScript Nang Hindi Nire-reload ang Pahina Gamit ang Paraang “pushState()”.
Upang baguhin ang URL nang hindi nire-reload ang web page, gamitin ang “ pushState() ” paraan. Ito ay isang tampok o ang paunang natukoy na paraan ng ' Bagay sa kasaysayan ” na nagpapahintulot sa pagbabago ng kasaysayan ng browser nang hindi nagna-navigate o nire-refresh ang pahina. Idinaragdag o binabago lang nito ang history stack at hindi naglo-load ng bagong page. Sa pamamagitan ng paggamit ng diskarteng ito, maaari kang magpalipat-lipat sa pagitan ng mga pahina sa pamamagitan ng pagdaragdag ng bagong entry sa history stack ng browser.
Syntax
Sundin ang ibinigay na syntax para sa 'pushState()' na paraan:
bintana. kasaysayan . pushState ( estado , pamagat , url ) ;
dito:
- “ estado ” ay kumakatawan sa bagong entry sa kasaysayan.
- “ pamagat ” ay ang partikular na text na maaaring ipakita sa title bar ng browser.
- “ url ” ay nagpapahiwatig ng pinalitan na URL bilang isang bagong entry.
Halimbawa
Sa isang HTML file, lumikha ng apat na button na tinatawag na “ modifyUrl() ” function sa pag-click sa pindutan:
< button sa pag-click = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 pindutan >
< button sa pag-click = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 pindutan >
< button sa pag-click = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 pindutan >
Tukuyin ang isang function ' modifyUrl() ” sa isang JavaScript file na magti-trigger sa pag-click sa button. Kinakailangan ang dalawang parameter, ang ' pamagat ' at ang ' url ”. Kapag tinawag ang pamamaraan sa pag-click sa pindutan, ang 'pamagat' at ang 'url' ay ipapasa bilang mga argumento. Suriin ang uri ng ' pushState ” ng bagay sa kasaysayan, kung hindi “ hindi natukoy ”. Pagkatapos, tawagan ang ' history.pushState() ” paraan upang baguhin ang URL:
function modifyUrl ( pamagat , url ) {
kung ( uri ng ( kasaysayan. pushState ) != 'hindi natukoy' ) {
ay obj = {
Pamagat : pamagat ,
Url : url
} ;
kasaysayan. pushState ( obj , obj. Pamagat , obj. Url ) ;
}
}
Makikita na sa bawat pag-click sa pindutan, matagumpay na mababago ang URL nang hindi nire-reload ang pahina:
Sa output sa itaas, makikita mo na ang back arrow button sa kaliwang itaas ( <- ) ay pinagana habang nag-click sa pindutan, ito ay nagpapahiwatig na maaari kang mag-navigate pabalik-balik dahil ang ' pushState() ” paraan ay nagdaragdag ng bagong URL sa history stack.
Paraan 2: Baguhin ang URL sa JavaScript Nang Hindi Nire-reload ang Pahina Gamit ang Paraan na 'replaceState()'
Gamitin ang ' replaceState() ” paraan para sa pagbabago ng URL nang hindi nire-reload ang web page. Ito rin ay isang tampok ng ' Bagay sa kasaysayan ” ngunit hindi ito magdaragdag ng bagong entry sa history stack. Binabago nito ang kasalukuyang estado ng kasaysayan ng browser at pinapalitan ito ng bagong estado. Sa pamamagitan ng paggamit ng diskarteng ito, hindi ka maaaring magpalipat-lipat sa pagitan ng mga pahina.
Syntax
Ang ibinigay na syntax ay ginagamit para sa 'replaceState()' na paraan:
Halimbawa
Sa tinukoy na function, tawagan ang ' replaceState() ” paraan upang palitan ang URL sa pag-click sa pindutan nang hindi nagre-reload o nagna-navigate sa pahina:
kung ( uri ng ( kasaysayan. replaceState ) != 'hindi natukoy' ) {
ay obj = {
Pamagat : pamagat ,
Url : url
} ;
kasaysayan. replaceState ( obj , obj. Pamagat , obj. Url ) ;
}
}
Isinasaad ng output na sa bawat pag-click ng button, nabago ang URL at walang opsyong mag-navigate para bumalik dahil hindi pinagana ang back arrow button:
Ibinigay namin ang lahat ng mahahalagang impormasyong nauugnay sa pagbabago ng URL nang hindi nire-reload ang pahina sa JavaScript.
Konklusyon
Upang baguhin/palitan ang URL nang hindi nire-refresh ang web page, gamitin ang “ pushState() 'paraan o ang' replaceState() ” paraan. Ang pamamaraang 'pushState()' ay nagdaragdag ng bagong URL bilang isang bagong entry sa isang stack ng kasaysayan at nagbibigay-daan sa mga user na mag-navigate pabalik-balik. Habang pinapalitan ng 'replaceState()' na paraan ang URL at hindi pinapayagan ang paglipat sa likod na pahina. Inilarawan ng artikulong ito ang mga paraan para sa pagbabago ng URL nang hindi nire-reload ang web page gamit ang JavaScript.