Tässä artikkelissa kuvataan menetelmät URL-osoitteen muokkaamiseen lataamatta verkkosivua uudelleen JavaScriptin avulla.
Kuinka muokata / muuttaa URL-osoitetta JavaScriptissä lataamatta sivua uudelleen?
Jos haluat muokata URL-osoitetta lataamatta verkkosivua uudelleen, käytä seuraavaa JavaScriptin ennalta määritettyä menetelmää:
Tapa 1: Muokkaa URL-osoitetta JavaScriptissä lataamatta sivua uudelleen käyttämällä 'pushState()' -menetelmää
Jos haluat muokata URL-osoitetta lataamatta verkkosivua uudelleen, käytä ' pushState() ”menetelmä. Se on ominaisuus tai ennalta määritetty menetelmä ' historian objekti ', joka mahdollistaa selainhistorian muuttamisen ilman sivua navigoimista tai päivittämistä. Se vain lisää tai muokkaa historiapinoa eikä lataa uutta sivua. Käyttämällä tätä lähestymistapaa voit siirtyä edestakaisin sivujen välillä lisäämällä uuden merkinnän selaimen historiapinoon.
Syntaksi
Noudata 'pushState()'-menetelmälle annettua syntaksia:
ikkuna. historia . pushState ( osavaltio , otsikko , url ) ;
Tässä:
- ' osavaltio ” edustaa uutta historiamerkintää.
- ' otsikko ” on tietty teksti, joka voidaan näyttää selaimen otsikkorivillä.
- ' url ' osoittaa korvatun URL-osoitteen uutena merkinnänä.
Esimerkki
Luo HTML-tiedostoon neljä painiketta, jotka kutsuvat ' muokkaaUrl() ”-toiminto painikkeen painalluksella:
< painiketta onclick = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 -painiketta >
< painiketta onclick = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 -painiketta >
< painiketta onclick = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 -painiketta >
Määritä funktio ' muokkaaUrl() ' JavaScript-tiedostossa, joka laukaisee painikkeen napsautuksen. Se vaatii kaksi parametria, ' otsikko ' ja ' url ”. Kun menetelmää kutsutaan napin painalluksella, 'title' ja 'url' välitetään argumentteina. Tarkista ' pushState ' historiaobjektista, jos se ei ole ' määrittelemätön ”. Soita sitten ' historia.pushState() ' tapa muuttaa URL-osoitetta:
toiminto muokkaaUrl ( otsikko , url ) {
jos ( tyyppi ( historia. pushState ) != 'määrittelemätön' ) {
oli obj = {
Otsikko : otsikko ,
URL-osoite : url
} ;
historia. pushState ( obj , obj. Otsikko , obj. URL-osoite ) ;
}
}
Voidaan nähdä, että jokaisella painikkeen napsautuksella URL-osoite muuttuu onnistuneesti lataamatta sivua uudelleen:
Yllä olevassa tulosteessa voit nähdä, että vasemmassa yläkulmassa oleva takaisin-nuolipainike ( <- ) on käytössä, kun napsautat painiketta, se osoittaa, että voit navigoida edestakaisin, koska ' pushState() ” -menetelmä lisää uuden URL-osoitteen historiapinoon.
Tapa 2: Muokkaa URL-osoitetta JavaScriptissä lataamatta sivua uudelleen käyttämällä 'replaceState()' -menetelmää
Käytä ' korvaaState() ' -menetelmää URL-osoitteen muokkaamiseen lataamatta verkkosivua uudelleen. Se on myös ominaisuus ' historian objekti ', mutta se ei lisää uutta merkintää historiapinoon. Se muuttaa selaimen historian nykyistä tilaa ja korvaa sen uudella tilassa. Käyttämällä tätä lähestymistapaa et voi vaihtaa edestakaisin sivujen välillä.
Syntaksi
Annettua syntaksia käytetään 'replaceState()' -menetelmälle:
Esimerkki
Soita määritetyssä funktiossa ' korvaaState() ' tapa korvata painikkeen napsautuksen URL-osoite lataamatta uudelleen tai siirtymättä sivulla:
jos ( tyyppi ( historia. korvaaState ) != 'määrittelemätön' ) {
oli obj = {
Otsikko : otsikko ,
URL-osoite : url
} ;
historia. korvaaState ( obj , obj. Otsikko , obj. URL-osoite ) ;
}
}
Tulos osoittaa, että jokaisella painikkeen napsautuksella URL-osoite on muuttunut, eikä ole mahdollista siirtyä takaisin, koska takaisin-nuolipainike on poistettu käytöstä:
Olemme toimittaneet kaikki URL-osoitteen muuttamiseen liittyvät olennaiset tiedot lataamatta sivua uudelleen JavaScriptillä.
Johtopäätös
Jos haluat muokata/muuttaa URL-osoitetta päivittämättä verkkosivua, käytä ' pushState() ”menetelmä tai ” korvaaState() ”menetelmä. 'pushState()' -menetelmä lisää uuden URL-osoitteen uudeksi merkinnäksi historiapinoon ja sallii käyttäjien navigoida edestakaisin. Vaikka 'replaceState()' -menetelmä korvaa URL-osoitteen eikä salli siirtymistä takasivulle. Tässä artikkelissa kuvattiin menetelmät URL-osoitteen muokkaamiseen lataamatta verkkosivua uudelleen JavaScriptin avulla.