popstate-tapahtuma
Reagoi selaimen edellinen- ja seuraava-toimintoihin
popstate-tapahtuma on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.
Mitä popstate tekee
popstate-tapahtuma käynnistyy ikkunassa, kun käyttäjä navigoi historiassa (taaksepäin, eteenpäin tai JavaScriptin history.back-kutsulla). Sen avulla SPA voi hahmotella oikean näkymän uudelleen selaimen käynnistämän navigoinnin perusteella.
Milloin se käynnistyy
popstate käynnistyy, kun käyttäjä napsauttaa taaksepäin- tai eteenpäin-painiketta tai kun kutsutaan history.back()-, history.forward()- tai history.go(n)-metodia. Se EI käynnisty, kun pushState- tai replaceState-kutsut tehdään manuaalisesti — kyse on ohjelmallisista päivityksistä, joista sivu tietää jo ennestään.
window.addEventListener("popstate", (e) => {
console.log("Navigated to", location.pathname, "state:", e.state);
renderPage(location.pathname);
});state-ominaisuus
Tapahtuman state-ominaisuus sisältää sen tilan, jonka välititte pushState- tai replaceState-kutsulle navigoinnin kohteena olevaa tietuetta varten. Käyttäkää sitä sellaisen käyttöliittymän tilan palauttamiseen, joka ei sisälly URL-osoitteeseen, kuten avoimen välilehden tai vierityssijainnin palauttamiseen.
Uuden URL-osoitteen lukeminen
Osoiterivi on jo päivitetty, kun popstate käynnistyy. Lukekaa location.pathname-, location.search- ja location.hash-arvot löytääksenne uuden URL-osoitteen. Yhdessä tilan kanssa nämä sisältävät kaikki kohdenäkymän hahmottamiseen tarvittavat tiedot.
Sivun ensimmäinen lataus
popstate EI käynnisty sivun ensimmäisellä latauskerralla — ainoastaan navigoinnin yhteydessä. Hahmotelkaa alkunäkymä käynnistyksen yhteydessä location-tietojen perusteella ja antakaa popstate-tapahtuman käsitellä myöhemmät navigoinnit. Muuten alkunäkymä on tyhjä, kun ensimmäinen takaisin navigointi saapuu.
// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));hashchange ja popstate
Pelkästään hashiin perustuvassa reitityksessä (esimerkiksi osoitteissa /#/about) hashchange-tapahtuma käynnistyy, kun hash muuttuu. popstate käynnistyy myös polun muuttuessa. Nykyaikaiset SPA:t käyttävät History API:a ja popstate-tapahtumaa; hash-reititys on vanhentunutta.
Napsautusten sieppaaminen
Jotta tavallisen <a>-elementin napsautus käynnistää asiakaspuolen navigoinnin, siepatkaa napsautus, estäkää preventDefaultilla selaimen oletustoiminto ja kutsukaa pushStatea sekä renderPagea. Tarkistakaa muokkausnäppäimet (Cmd/Ctrl-napsautus avaa uuden välilehden) ja antakaa niiden yhteydessä selaimen oletustoiminnan jatkua.
document.addEventListener("click", (e) => {
const a = e.target.closest("a");
if (!a || a.target || e.metaKey || e.ctrlKey) return;
e.preventDefault();
history.pushState(null, "", a.href);
renderPage(location.pathname);
});Vierityssijainnin palauttaminen
Selaimet yrittävät palauttaa vierityssijainnin automaattisesti taaksepäin navigoitaessa, mutta tämä ei toimi SPA-sovelluksissa luotettavasti, koska sisältö hahmotellaan asynkronisesti. Tallentakaa vieritys pushState-tilaan ja palauttakaa se popstate-tapahtumassa: window.scrollTo(0, e.state?.scroll ?? 0).
Asynkronisen hahmottelun huomioitava seikka
Jos renderPage hakee tietoja asynkronisesti, URL-osoite päivittyy ennen sisällön saapumista. Näyttäkää lataustila ja hahmotelkaa sisältö vasta sen jälkeen. Välttäkää kilpailutilanteet, joissa käyttäjä napsauttaa takaisin haun aikana ja peruutetun haun tulos korvaa uuden näkymän.
Kehysten reitittimet
React Routerin, Vue Routerin ja SvelteKitin reititin kietovat History API:n ja popstate-tapahtuman yhteen. Ilman kehystäkin perustana oleva mekanismi on sama — kuunnelkaa popstate-tapahtumaa, siepatkaa linkit ja kutsukaa pushStatea. Voitte toteuttaa oman reitittimen noin 50 rivillä tavallista JavaScriptiä, kun suorituskykykustannukset ovat tärkeitä.
Yleinen sudenkuoppa: muistivuodot
Kunkin näkymän alustus voi liittää tapahtumankuuntelijoita ja ajastimia. Ilman näkymän vaihtuessa tehtävää eksplisiittistä purkamista (popstate-tapahtumassa tai pushState-kääreessä) kuuntelijat kasaantuvat ja heikentävät suorituskykyä ajan mittaan. Seuratkaa kunkin näkymän tilauksia AbortControllerilla ja keskeyttäkää ne näkymän vaihtuessa.
Tietojen tarkistus
Miksi popstate-tapahtuma EI käynnisty, kun kutsutte itse history.pushStatea?
Yhteenveto
popstate käynnistyy selaimen taaksepäin- ja eteenpäin-navigoinnissa, jolloin käytettävissä ovat tallennettu tila ja uusi sijainti. Se ei käynnisty pushState- tai replaceState-kutsun yhteydessä (koodinne tietää siitä jo) eikä sivun ensimmäisellä latauskerralla (hahmotelkaa näkymä itse). Siepatkaa linkkien napsautukset SPA-navigointia varten, tallentakaa vierityssijainti tilaan ja purkakaa kuuntelijat näkymän vaihtuessa muistivuotojen estämiseksi.
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 ”popstate-tapahtuma” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “popstate-tapahtuma”. 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 ”popstate-tapahtuma”?
Reagoi selaimen edellinen- ja seuraava-toimintoihin 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 2/4.
Kuinka kauan ”popstate-tapahtuma”-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