Egy egyszerű bevezetés a történelem API JavaScript
A történelem API egyike azoknak a JavaScript technikákat, hogy minden webfejlesztő tudnia kell hideg. Enélkül a Vissza gomb egyetlen kattintása egyenesen kiugrik az alkalmazásból. Elveszít minden folyamatban lévő munkát, és a felhasználó kénytelen lesz újrakezdeni.
szerencsére van egy egyszerű megoldás. A HTML5 formalizálása (és az Internet Explorer 10 kiadása) óta van egy Előzmények API, amely lehetővé teszi, hogy hozzáadja az előzmények listáját, és reagáljon a vissza és előre navigációra. Ebben a cikkben megtudhatja, hogyan működik — és kipróbálhatja egy élő példával.
de mielőtt továbblépnénk, nézzük meg közelebbről a problémát.
a régi időkben a web, egy weboldal nem egy dolog—kijelző cucc. Amikor valami mást akart megnézni, rákattintott egy linkre, és új URL-re ment.
ahogy a JavaScript egyre erősebb lett, a fejlesztők rájöttek, hogy minden weboldal önmagában teljes alkalmazás lehet. Egy weboldal riválisa lehet egy asztali alkalmazásnak! A probléma az volt, hogy a böngésző előre-hátra gombjai nem illettek az új alkalmazásmodellhez. Előfordulhat például, hogy a felhasználó egy egyoldalas webalkalmazásban végrehajtja a feladatok sorozatát, majd a Vissza gomb használatával egy lépést visszaléphet. Ehelyett a Vissza gomb visszatér az előző weboldalra, hatékonyan leállítva a JavaScript alkalmazást annak közepén, amit csinál.
gyakran ez a viselkedés nem volt intuitív. Vegyünk például egy olyan alkalmazást, amely a XMLHttpRequest objektumot Használja az új adatok lekéréséhez és az oldal frissítéséhez. A felhasználó számára úgy tűnhet, hogy új oldalra utazik. De ha elkövetik azt a hibát, hogy a Vissza gombot használják, az illúzió összetört, és minden oldalra megy.
vessünk egy közelebbi pillantást. Íme egy példa, amely lehetővé teszi, hogy lépjen át a Dictionnaire Infernal, egy híres (és most közkincs) könyv 1818 leíró furcsa vadállatok babona és mitológia. A trükk az, hogy az előző és a következő linkek Nem visznek egy másik oldalra. Ehelyett aszinkron hívást indítanak a XMLHttpRequest segítségével, amely megkapja a következő diára vonatkozó információkat. Ezután a JavaScript kód frissíti a diadobozt anélkül, hogy megzavarná az oldal többi részének tartalmát.
itt van egy élő változata a példa, kiegészítve előzmények API támogatás. Annak ellenére, hogy minden egy weboldalon zajlik, az előre és vissza gombok segítségével zökkenőmentesen léphet az egyik képről a másikra. Akár az Újratöltés gombot is használhatja (újratölti az aktuális diát, ahelyett, hogy újraindítaná az egész alkalmazást), és elhelyezhet olyan könyvjelzőket, amelyek megtartják az aktuális állapotot — más szóval egyenesen a diához vezetnek, amelyet éppen néz.
és itt van a példa egy régi iskola verziója, amely nem használja az Előzmények API-t. Nem számít, milyen messze van az oldalsó show — ban-amikor a Vissza gombot használja, visszaugrik az előző weboldalra. A Forward és Reload gombok hasonlóan töröttek. Könyvjelzők indítsa újra az alkalmazást az elejétől.
itt letöltheti az összes forráskódot, amellyel játszhat. (Helyileg azonban nem fog működni, mert aXMLHttpRequest objektumot Használja webes kérések készítéséhez.) A cikk többi részében lebontom, hogyan működik minden.
A példa előkészítése
mielőtt belépnénk az Előzmények API-ba, fontos, hogy alapvető ismeretekkel rendelkezzünk a példa működéséről. Minden nagyon egyszerű.
az oldal egy számot használ, hogy nyomon kövesse az éppen megjelenített diát. Ha a Tovább vagy az előző gombra kattint, a kód megváltoztatja az aktuális diaszámot. Ezután a saját goToSlide() funkcióját használja az oldal frissítéséhez.
a goToSlide() függvény az, ahol a valódi munka zajlik. Asychronous kérést indít a hírhedt XMLHttpRequest objektummal.
Ön dönti el, hogy a dia tartalma Hogyan generálódik és hogyan kerül vissza a hívókódhoz az oldalon. Általában van valamilyen útválasztási keretrendszer, amely kiváltja a megfelelő szerveroldali kódot. Ez a szerver oldali kód ezután megragadhatja a dia tartalmát egy gyorsítótárból, egy adatbázisból, egy fájlból vagy akár egy kódolt jelölőblokkból.
ebben a példában a lehető legegyszerűbben tartottam a dolgokat. A kérelem megragadja a HTML jelölést egy statikus fájlból. Tehát, ha a harmadik diát kéri (olyan relatív URL-lel, mint a diák/3), akkor csak a diához kap egy HTML-jelölést. Nyugi!
amikor a kérés befejeződik, a böngésző elindítja a newSlideReceived() eseménykezelőt. Ezután egyszerűen arról van szó, hogy a kapott jelölést beillesztjük az oldalra egy <div>helyőrző használatával.
Ez minden, amit tudnod kell az oldal naiv verziójának felépítéséhez, amely nem támogatja a böngésző előzményeit.
A history objektum
a history objektum szinte a JavaScript hajnala óta létezik. De élete nagy részében sokkal kevésbé volt hatékony (és sokkal kevésbé hasznos), mint ma.
az eredeti history objektumnak csak egy tulajdonsága és három alapvető módszere van. A tulajdonság length, és megmondja, hogy hány bejegyzés van a böngésző előzménylistájában:
alert("You have " + history.length + " pages in the history.");
Ez a részlet többnyire haszontalan.
A három eredeti history módszerek back() (küld egy látogató egy lépéssel vissza a böngészési előzmények), forward() (küld egy látogató egy lépéssel előre) és go() (vesz egy látogató egy lépéssel előre) numerikus eltolás, amely megmondja a böngészőnek, hogy hány lépést kell előre vagy hátra lépnie). Mindez viszonylag keveset jelent, hacsak nem szeretné megtervezni saját egyedi vissza-és előre gombjait egy weboldalon.
a HistoryAPI két sokkal hasznosabb összetevőt ad hozzá: a pushState() módszert és a onPopState eseményt.
bejegyzés hozzáadása az előzmények listájához
apushState() módszer az Előzmények API középpontja. Ez lehetővé teszi egy új elem hozzáadását az aktuális oldal előzménylistájához. Így néz ki:
ezen a ponton elgondolkodhat — mi értelme van egynél több bejegyzésnek ugyanazon az oldalon? A trükk az, hogy minden bejegyzéshez van valamilyen állapot csatolva — egy összekapcsolt információ vagy objektum, amelyet beállított. Amikor a felhasználó visszalép az előzmények listáján, megkapja a megfelelő állapotinformációkat, így visszaállíthatja az oldalt az előző verzióra.
a pushState() módszer három argumentumot tartalmaz:
- adatok. Az első argumentum minden olyan adat, amelyet tárolni szeretne, hogy képviselje az oldal aktuális állapotát. Ezzel az információval visszaállíthatja az oldalt, amikor a felhasználó visszatér az előzmények listájára.
- cím. A második argumentum az oldal címe, amelyet a böngészőnek meg kell jelenítenie. Jelenleg minden böngésző egységesen figyelmen kívül hagyja ezt a részletet. (Tehát csak át
null.) - URL. A harmadik argumentum az URL új verziója, amelyet meg szeretne jeleníteni az oldal számára a böngésző címsorában. Ez lehetővé teszi az Újratöltés gomb és a böngésző könyvjelzőinek jobb támogatását.
a Dictionnaire Infernal slideshow példában könnyű hozzáadni az előzmények támogatását, amire csak a dia számának nyomon követéséhez van szüksége. Minden alkalommal hozzáadja az előzmények listájához, amikor a dia megváltozik.
itt van a kódsor, amelyet hozzá kell adnia:
history.pushState(slideNumber, null, null);
észre fogod venni, hogy ez a kód nem változtatja meg az oldal címét a második argumentummal (mert egyébként nem működik), és nem változtatja meg az URL-t (látni fogod, hogyan kell ezt egy pillanat alatt megtenni). Csak a dia számát tárolja.
a teljes kép, itt van a két hívás history.pushState() a megfelelő helyre-az eseménykezelők a következő és az előző linkek:
visszatérve egy előző oldalra
amikor a pushState()módszert használja, akkor a természetes megfelelőjére, a onPopState eseményre is gondolnia kell. Míg apushState() módszer új bejegyzést tesz a böngésző előzménylistájába, aonPopState esemény lehetőséget ad arra, hogy foglalkozzon vele, amikor a felhasználó visszatér.
annak megértéséhez, hogy ez hogyan működik, fontolja meg, mi történik, ha a látogató a Dictionnaire Infernal példában szereplő összes dián keresztül lép. Amint minden új dia betöltődik, az oldal hozzáad egy előzménybejegyzést. De ha a felhasználó visszalép a Vissza gombbal, akkor semmi sem történik.
a hiba kijavításához kezelnie kell a onPopState eseményt, amely minden előzmény navigáció után elindul. (Ez magában foglalja, ha az előzmények egyikét használja, például history.back(), valamint amikor a felhasználó rákattint a böngésző navigációs gombjaira.)
a onPopStateesemény megadja a kódot a korábban tárolt állapotadatokkal pushState(). Ebben az esetben ez csak a diaszám, amelyet megragadhat az esemény argumentum state tulajdonságából, így:
var slideNumber = e.State;
az Ön feladata az állapotinformációk használata az oldal megfelelő verziójának visszaállításához. A jelenlegi példában ez azt jelenti, hogy a megfelelő dia betöltése a praktikus goToSlide() funkció meghívásával történik, amely kezeli az összes dia navigációt. A teljes kód rövid és egyértelmű:
figyeljük meg, hogy ellenőrizni kell, hogy a e.Statevan-e null, ami néhány böngészőben történik, amikor az oldal Első alkalommal van betöltve, és nincs mentve állapot.
az URL megváltoztatása
a példa jelenlegi verziója támogatja az előzmények listáját, de nem játszik jól az Újratöltés gombbal. Például, ha rákattint a harmadik diára, majd frissíti az oldalt, akkor az elején visszatér. Ugyanebben a helyzetben találja magát, ha megpróbálja könyvjelzővel ellátni az egyik diát — térjen vissza a könyvjelzőhöz, és újra elindul az első dián.
ezeknek a problémáknak a megoldása az Előzmények API használata az URL módosításához. De van egy fontos oka annak, hogy ezt a lépést az utolsóig hagytam. Az Előzmények API-t használó példák gyakran megváltoztatják az URL-t, de nem használják az új URL-t. Ez olyan webalkalmazáshoz vezethet, amely megszakad, amikor a felhasználó frissíti (csúnya 404-es hibával), vagy az oldal hasonló, de kissé eltérő verziójára lép. Ha nem biztos abban, hogyan kell kezelni a különböző URL-eket, akkor nem szégyen az előző példa egyszerűsített megközelítését használni.
tehát tegyük fel, hogy készen áll a merülésre, jobb URL-ek készítésére, és szépen játszani a könyvjelzőkkel és a böngésző frissítéseivel. Két alapvető megközelítést alkalmazhat:
- változtassa meg az URL-oldal nevét. A Dictionnaire Infernal példában megváltoztathatja az URL-t Slide1-re.html, Slide2.html, stb, mint a felhasználó mozog a diák. A fogás az, hogy vagy tényleges oldalakkal kell rendelkeznie ezekkel a nevekkel (ne csináld, ez nehézkes), vagy be kell állítania az útválasztást, hogy amikor a webszerver megkapja a Slide2 kérését.html ez fut kódot, amely létrehozza a megfelelő változata az oldal.
- tartsa meg ugyanazt az oldalnevet, de adjon hozzá információkat a lekérdezési karakterlánchoz. Ez egy egyszerűbb, kisebb léptékű megközelítés. Ahogy a felhasználó áthalad a diavetítésen, olyan URL-ekkel fog végződni, mint a diavetítés.html?slide=1, majd diavetítés.html?slide=2, diavetítés.html?slide=3, és így tovább. Ennek a megközelítésnek az az előnye, hogy triviálisan könnyű írni egy kis JavaScript-darabot, amely ellenőrzi a lekérdezési karakterláncot, és biztosítja, hogy az oldal újratöltésekor a jobb oldali dián legyen. Nem kell semmilyen szerver kódot, hogy ez a munka — egy oldal meg tudja csinálni az egészet.
itt található a pushState() korábban látott hívás módosított változata, amely a második megközelítést használja. Ez a kód a dia számát az URL végére tölti:
history.pushState(slide, null, "Dictionnaire.html?slide=" + slide);
és itt van a kód, amely az oldal újratöltésekor fut. Ellenőrzi a dia adatait az URL-ben, és — ha megfelelő számot talál-felhívja a goToSlide() függvényt a dia betöltéséhez.
most már soha nem veszíti el a helyét a diavetítésben. Kipróbálhatja a példa teljes verzióját, vagy itt mindent letölthet.
végső részletek
Az előzmények API könnyen használható, de megkönnyíti a nagyobb problémák megoldását is. Most, hogy tudod, hogy minden hogyan illeszkedik egymáshoz, itt van néhány utolsó tanács:
- ha nyomja, meg kell pop. A
pushState()módszer és aonPopStateesemény partnerek. Amit az egyikbe beleteszel, azt visszakapod a másikkal. - csak akkor változtassa meg az URL-t, ha készen áll a kezelésére. Örülök, hogy megváltoztatja az URL-jét, hogy tükrözze a változó oldalt, de képesnek kell lennie arra, hogy kezelje a kéréseket minden használt URL-hez. Ha az URL olyan oldalra mutat, amely nem létezik, az alkalmazás megszakítja a frissítéseket és a könyvjelzőket.
- használjon egyéni állapotobjektumot további információk tárolásához. Nem kell ragaszkodnia egy egyszerű számhoz. Tudod, hogy egy egész egyéni objektumot állapotba, amely csomag össze az összes szükséges információt egy összetett feladat.