Ez a cikk leírja azokat a módszereket, amelyek segítségével módosíthatja az URL-t a weboldal JavaScript használatával történő újratöltése nélkül.
Hogyan lehet módosítani/módosítani az URL-t a JavaScriptben az oldal újratöltése nélkül?
Az URL módosításához a weboldal újratöltése nélkül használja a következő JavaScript előre meghatározott módszert:
1. módszer: Módosítsa az URL-t a JavaScriptben az oldal újratöltése nélkül a „pushState()” módszerrel
Az URL módosításához a weboldal újratöltése nélkül használja a „ pushState() ” módszerrel. Ez egy funkció vagy a „ történelem objektum ', amely lehetővé teszi a böngészési előzmények módosítását az oldalon való navigálás vagy frissítés nélkül. Csak hozzáadja vagy módosítja az előzmények veremét, és nem tölt be új oldalt. Ezzel a megközelítéssel oda-vissza válthat az oldalak között, ha új bejegyzést ad hozzá a böngésző előzménykészletéhez.
Szintaxis
Kövesse a „pushState()” metódus megadott szintaxisát:
ablak. történelem . pushState ( állapot , cím , url ) ;
Itt:
- ' állapot ” jelenti az új előzménybejegyzést.
- ' cím ” az a bizonyos szöveg, amely a böngésző címsorában jeleníthető meg.
- ' url ” a lecserélt URL-t új bejegyzésként jelzi.
Példa
Egy HTML-fájlban hozzon létre négy gombot, amelyek a „ modifyUrl() ” funkció a gomb kattintásán:
< gomb onclick = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 gomb >
< gomb onclick = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 gomb >
< gomb onclick = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 gomb >
Határozzon meg egy függvényt ' modifyUrl() ” egy JavaScript-fájlban, amely a gombkattintásra indítja el. Két paraméter kell hozzá, a „ cím ' és a ' url ”. A metódus meghívásakor a gombra kattintáskor a „title” és az „url” argumentumként kerül átadásra. Ellenőrizze a „ pushState ' a történelem objektumból, ha nem ' határozatlan ”. Ezután hívja a ' history.pushState() ” módszer az URL megváltoztatásához:
funkció modifyUrl ( cím , url ) {
ha ( típusú ( történelem. pushState ) != 'határozatlan' ) {
volt obj = {
Cím : cím ,
URL : url
} ;
történelem. pushState ( obj , obj. Cím , obj. URL ) ;
}
}
Látható, hogy minden gombkattintásnál sikeresen megváltozik az URL az oldal újratöltése nélkül:
A fenti kimeneten látható, hogy a bal felső sarokban lévő vissza nyíl gomb ( <- ) engedélyezve van, miközben a gombra kattint, ez azt jelzi, hogy oda-vissza navigálhat, mert a „ pushState() ” metódus hozzáadja az új URL-t az előzményveremhez.
2. módszer: Módosítsa az URL-t a JavaScriptben az oldal újratöltése nélkül a „replaceState()” módszerrel
Használja a ' csereállapot() ” módszer az URL módosítására a weboldal újratöltése nélkül. Ez is jellemzője a „ történelem objektum ”, de nem ad hozzá új bejegyzést az előzmények vereméhez. Megváltoztatja a böngésző előzményeinek jelenlegi állapotát, és egy új állapotra cseréli. Ezzel a megközelítéssel nem lehet oda-vissza váltani az oldalak között.
Szintaxis
A megadott szintaxis a „replaceState()” metódushoz használatos:
Példa
A meghatározott függvényben hívja meg a „ csereállapot() ” módszerrel lecserélheti az URL-t a gombkattintáson anélkül, hogy újra be kellene töltenie vagy navigálna az oldalon:
ha ( típusú ( történelem. helyettesítState ) != 'határozatlan' ) {
volt obj = {
Cím : cím ,
URL : url
} ;
történelem. helyettesíti Állapot ( obj , obj. Cím , obj. URL ) ;
}
}
A kimenet azt jelzi, hogy minden gomb kattintásakor az URL megváltozott, és nincs lehetőség a visszalépésre, mivel a vissza nyíl gomb le van tiltva:
Minden lényeges információt megadtunk az URL módosításához anélkül, hogy JavaScriptben újratöltöttük volna az oldalt.
Következtetés
Az URL módosításához/módosításához a weboldal frissítése nélkül használja a „ pushState() ' módszer vagy a ' csereállapot() ” módszerrel. A „pushState()” metódus az új URL-t új bejegyzésként adja hozzá az előzményveremhez, és lehetővé teszi a felhasználók számára, hogy oda-vissza navigáljanak. Míg a „replaceState()” metódus lecseréli az URL-t, és nem teszi lehetővé a hátsó oldalra való mozgást. Ez a cikk az URL módosításának módszereit ismerteti a weboldal JavaScript használatával történő újratöltése nélkül.