Šajā rakstā ir aprakstītas metodes, kā mainīt URL, atkārtoti neielādējot tīmekļa lapu, izmantojot JavaScript.
Kā modificēt/mainīt URL JavaScript, nepārlādējot lapu?
Lai mainītu URL, atkārtoti neielādējot tīmekļa lapu, izmantojiet šo JavaScript iepriekš definēto metodi:
1. metode: modificējiet URL JavaScript, nepārlādējot lapu, izmantojot metodi “pushState()”
Lai mainītu URL, atkārtoti neielādējot tīmekļa lapu, izmantojiet ' pushState() ” metode. Tā ir funkcija vai iepriekš definēta metode vēstures objekts ”, kas ļauj mainīt pārlūkprogrammas vēsturi bez navigācijas vai lapas atsvaidzināšanas. Tas tikai pievieno vai maina vēstures kaudzi un neielādē jaunu lapu. Izmantojot šo pieeju, varat pārslēgties starp lapām un atpakaļ, pievienojot jaunu ierakstu pārlūkprogrammas vēstures kaudzē.
Sintakse
Ievērojiet norādīto sintaksi “pushState()” metodei:
logs. vēsture . pushState ( Valsts , virsraksts , url ) ;
Šeit:
- ' Valsts ” ir jaunais vēstures ieraksts.
- ' virsraksts ” ir konkrētais teksts, ko var parādīt pārlūkprogrammas virsrakstjoslā.
- ' url ” norāda aizstāto URL kā jaunu ierakstu.
Piemērs
HTML failā izveidojiet četras pogas, kas izsauc ' modifyUrl() ” funkcija uz pogas klikšķi:
< pogu onclick = 'modifyUrl('CSS apmācība', 'CSSTutorial.html');' > 2 pogu >
< pogu onclick = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 pogu >
< pogu onclick = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 pogu >
Definējiet funkciju ' modifyUrl() ” JavaScript failā, kas aktivizēs, noklikšķinot uz pogas. Tam nepieciešami divi parametri, ' virsraksts ” un „ url ”. Kad metode tiek izsaukta, noklikšķinot uz pogas, 'nosaukums' un 'url' tiks nodoti kā argumenti. Pārbaudiet '' veidu pushState ' no vēstures objekta, ja tas nav ' nenoteikts ”. Pēc tam zvaniet uz ' history.pushState() ”, lai mainītu URL:
funkciju modifyUrl ( virsraksts , url ) {
ja ( veids ( vēsture. pushState ) != 'nenoteikts' ) {
bija obj = {
Nosaukums : virsraksts ,
URL : url
} ;
vēsture. pushState ( obj , obj. Nosaukums , obj. URL ) ;
}
}
Redzams, ka uz katra pogas noklikšķināšanas URL tiks veiksmīgi nomainīts, nepārlādējot lapu:
Iepriekš redzamajā izvadē var redzēt, ka augšējā kreisajā pusē esošā atpakaļbultiņas poga ( <- ) ir iespējots, noklikšķinot uz pogas, tas norāda, ka varat pārvietoties uz priekšu un atpakaļ, jo “ pushState() ” metode pievieno jauno URL vēstures kaudzē.
2. metode: modificējiet URL JavaScript, nepārlādējot lapu, izmantojot metodi “replaceState()”
Izmantojiet ' aizstātState() ”, lai mainītu URL, nepārlādējot tīmekļa lapu. Tā ir arī iezīme ' vēstures objekts ”, taču tas nepievienos jaunu ierakstu vēstures kaudzē. Tas maina esošo pārlūkprogrammas vēstures stāvokli un aizstāj to ar jaunu stāvokli. Izmantojot šo pieeju, jūs nevarat pārslēgties starp lapām uz priekšu un atpakaļ.
Sintakse
Dotā sintakse tiek izmantota metodei “replaceState()”:
Piemērs
Definētajā funkcijā izsauciet ' aizstātState() ” metodi, lai aizstātu URL uz pogas klikšķi, nepārlādējot vai nepārvietojot lapu:
ja ( veids ( vēsture. aizstātState ) != 'nenoteikts' ) {
bija obj = {
Nosaukums : virsraksts ,
URL : url
} ;
vēsture. aizstātState ( obj , obj. Nosaukums , obj. URL ) ;
}
}
Izvade norāda, ka, nospiežot katru pogu, URL ir mainīts, un nav iespējas pārvietoties, lai atgrieztos, jo atpakaļbultiņas poga ir atspējota:
Mēs esam snieguši visu būtisko informāciju, kas attiecas uz URL modifikāciju, nepārlādējot lapu JavaScript.
Secinājums
Lai modificētu/mainītu URL, neatsvaidzinot tīmekļa lapu, izmantojiet “ pushState() 'metode vai ' aizstātState() ” metode. Metode “pushState()” pievieno jauno URL kā jaunu ierakstu vēstures kaudzē un ļauj lietotājiem pārvietoties uz priekšu un atpakaļ. Kamēr metode “replaceState()” aizstāj URL un neļauj pārvietoties uz aizmugures lapu. Šajā rakstā ir aprakstītas metodes, kā mainīt URL, atkārtoti neielādējot tīmekļa lapu, izmantojot JavaScript.