pushState ja replaceState
Päivitä selaimen URL-osoite lataamatta koko sivua uudelleen
pushState ja replaceState on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
History API
History API:n avulla sivu voi vaihtaa osoiterivillä näytettävää URL-osoitetta käynnistämättä täyttä navigointia. Yhdessä asiakaspuolen renderöinnin kanssa tämä mahdollistaa yhden sivun sovellukset, jotka tuntuvat natiivisovelluksilta mutta säilyttävät kirjanmerkeillä tallennettavat URL-osoitteet.
pushState
history.pushState(state, "", url) lisää uuden merkinnän selaimen historiaan. Osoiterivin URL päivittyy heti, eikä verkkopyyntöä tehdä. Käyttäjä voi siirtyä takaisin edelliseen merkintään selaimen takaisin-painikkeella.
history.pushState({ view: "settings" }, "", "/settings");state-argumentti
Ensimmäinen argumentti on merkintään liitettyä vapaamuotoista sarjoitettavaa dataa. Lue se myöhemmin history.state-ominaisuuden avulla tai popstate-tapahtumissa. Käytä sitä käyttöliittymän tilan, kuten avoinna olleen välilehden tai vierityssijainnin, välittämiseen, jotta takaisin siirtyminen voi palauttaa näkymän täsmälleen ennalleen.
title-argumentti
Toinen argumentti on merkinnän otsikko. Käytännössä kaikki nykyaikaiset selaimet jättävät sen huomiotta — asettakaa otsikko suoraan komennolla document.title = "...". Vakiintuneen käytännön mukaisesti välittäkää tyhjä merkkijono; sillä ei ole vaikutusta.
url-argumentti
Kolmas argumentti on uusi URL-osoite. Suhteelliset URL-osoitteet ratkaistaan nykyisen sivun perusteella; uuden URL-osoitteen on oltava samaa alkuperää (eri alkuperä aiheuttaa SecurityError-virheen). Selaimet eivät hae URL-osoitetta — pushState päivittää vain osoiterivin ja historian.
replaceState
history.replaceState(state, "", url) korvaa nykyisen historiatietueen uuden lisäämisen sijaan. Käyttäkää sitä, kun haluatte päivittää URL-osoitteen luomatta uutta askelta takaisin navigointiin, esimerkiksi suodattimen kyselymerkkijonoa päivitettäessä.
// Update query string in place
const url = new URL(location);
url.searchParams.set("filter", "open");
history.replaceState(null, "", url);pushState-käyttötapaukset
SPA-reittien vaihtaminen (navigointilinkin napsauttaminen ilman sivun täyttä uudelleenlatausta), modaalin avaaminen (jolloin takaisin-painike sulkee modaalin) ja ohjatun toiminnon vaiheiden vaihtaminen. Jokaisen merkityksellisen tilan tulisi olla uusi historiatietue, jotta takaisin-painike toimii käyttäjien odottamalla tavalla.
replaceState-käyttötapaukset
Suodatin-, lajittelu- ja sivutusasetusten päivitykset, joiden ei pitäisi täyttää historiaa, uudelleenohjaus lomakkeen osittaisen täyttämisen jälkeen sekä seuranta-parametrien päivittäminen ilman navigoitavien tietueiden luomista. Kun käyttäjä painaa takaisin-painiketta, nämä ”välitilat” ohitetaan.
Näkymän päivittäminen pushState-kutsun jälkeen
pushState muuttaa vain URL-osoitetta — koodinne on päivitettävä DOM erikseen. Toimintamalli on seuraava: hahmotelkaa uusi sisältö ja kutsukaa sen jälkeen pushState. Yhdessä nämä tuottavat SPA-käyttökokemuksen.
function navigate(path) {
renderPage(path);
history.pushState(null, "", path);
window.scrollTo(0, 0);
}Otsikon ja metatietojen päivittäminen
Päivittäkää document.title ja og:title-metatunnisteet navigoinnin jälkeen, jotta sosiaalisen median jakaminen ja selaimen välilehden otsikko vastaavat nykyistä näkymää. Jos tämä unohtuu, seuraavissa jaoissa näkyy alkuperäinen otsikko — kyseessä on hienovarainen mutta yleinen SPA-virhe.
Alustava pushState sivun latautuessa
pushState-kutsun tekeminen ennen käyttäjän navigointia korvaa alkuperäisen tietueen. Kun haluatte liittää tilan sivun ensimmäiseen historiatietueeseen, käyttäkää replaceStatea — se lisää tilan muuttamatta historian syvyyttä.
Turvallisuusrajoitus
pushState-osoitteiden on oltava samaa alkuperää. Jos yritätte tehdä pushState-kutsun osoitteeseen https://evil.com, se aiheuttaa SecurityError-virheen. Tämä estää sivuja väärentämästä osoiteriviä niin, että käyttäjät luulisivat olevansa toisella sivustolla.
Tietojen tarkistus
Mitä history.replaceState tekee toisin kuin history.pushState?
Yhteenveto
pushState lisää uuden historiatietueen ilman sivun uudelleenlatausta — se on SPA-reitityksen perusta. replaceState päivittää nykyisen tietueen paikallaan kosmeettisia URL-muutoksia varten. Molemmat edellyttävät samaa alkuperää olevia URL-osoitteita ja jättävät title-argumentin huomiotta. Päivittäkää DOM aina erikseen ja muistakaa päivittää document.title sekä metatunnisteet navigoinnin jälkeen.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”pushState ja replaceState” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “pushState ja replaceState”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”pushState ja replaceState”?
Päivitä selaimen URL-osoite lataamatta koko sivua uudelleen Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”pushState ja replaceState”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- pushState ja replaceState
- popstate-tapahtuma
- Hajautukseen perustuva ja polkuun perustuva reititys
- Navigation API nykyaikaisissa selaimissa