A Gecko2 óta bevezetett (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
A HTML5 két módszert vezet be: histtory.pushState() és history.replaceState(), amelyek lehetővé teszik a történet entitások hozzáadását és módosítását. Ugyanakkor ezek a módszerek a window.onpostate eseményrel is működnek.
Módosítsd a referátort a history.pushState() metódussal, amely használható a xmlhttpRequest objektum számára létrehozott http fejlécben az állapot módosítása után. Ez a referer lesz a dokumentum URL-je, amikor létrehozták az XMLHttpRequestet.
a pushState az aktuális oldal rekordjának hozzáadására a történelembe, míg a replaceState és a pushState pontosan ugyanúgy használatban van, az egyetlen különbség, hogy ezzel módosítják a jelenlegi oldal rekordját a történelemben.
példa
Tegyük fel http://mozilla.org/foo.html hogy az oldal végrehajtja a JS-t
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
Ez a módszer az URL-cím sávot http://mozilla.org/bar.html jeleníti meg,De a böngésző nem tölti be bar.html oldalt, még ha létezik sem。
Most ismét tegyük fel, hogy a felhasználó továbbra is hozzáfér a http://google.com-höz, majd visszakattint. Ekkor az URL címsáv http://mozilla.org/bar.html az oldal kap egy popstate eseményt (chrome), amely tartalmazza a stateObj másolatát. Ez az oldal úgy néz ki, mint foo.html. +
Ekkor újra rákattintunk, és az URL megváltozik, http://mozilla.org/foo.html,document újabb popstate eseményt és null state objektumot kap. Ez a visszaküldési intézkedés nem változtatja meg a dokumentum tartalmát. (Talán egy idő után megpróbál betölteni...) Chrome)
pushState módszer
pushState() három paraméterrel rendelkezik: state object, title (most figyelmen kívül hagyva, kezeletlen), URL (opcionális). Részletek:
· state object – Az állapotobjektum egy Javascrip{filter}t objektum, amely egy pushState() metódus által létrehozott új történeti entitáshoz kapcsolódik. Arra szolgál, hogy tárolják azokat a bejegyzéseket, amiket a történetbe szeretnél beilleszteni. Az állapotobjektum bármely Json string lehet. Mivel a Firefox a felhasználó merevlemezét használja az állapotobjektum eléréséhez, ennek a tárgynak a maximális tárolóhelye 640k. Ha ez az érték nagyobb, a pushState() metódus kivételt ad ki. Ha több helyre van szükséged a tároláshoz, használj helyi tárolót.
· cím—a Firefox most figyelmen kívül hagyja ezt a paramétert, bár a jövőben is használható lehet. A legbiztonságosabb módja a használatának, ha egy üres sorozatot továbbítunk, hogy elkerüljük a jövőbeni módosításokat. Vagy átadhatsz egy rövid címet, hogy jelezd az államot
· URL - Ezt a paramétert használják az új történeti entitás URL-jének továbbítására, figyelem, hogy a böngésző nem tölti be ezt az URL-t a pushState() metódus hívása után. De lehet, hogy egy idő után megpróbálja betölteni ezt az URL-t. Például, miután a felhasználó újraindítja a böngészőt, az új URL nem lehet abszolút útvonal. Ha ez egy relatív út, akkor az a meglévő URL-hez képest is relatív lesz. Az új URL-nek kodoménnek kell lennie a meglévő URL-lel, különben a pushState() kivételt ad. Ez a paraméter opcionális, és ha üres, akkor a dokumentum aktuális URL-jeként kerül elhelyezésre.
Bizonyos értelemben a pushState() metódus meghívása olyan, mint a window.locatio{filter}n = "#foo" beállítása, amelyek mindkettő létrehoz és aktivál egy másik történeti entitást a jelenlegi dokumentumhoz kapcsolódóan, de a pushState() további előnyökkel bír:
Az új URL lehet bármely olyan URL, amely ugyanabban a domainben van, mint a jelenlegi URL, szemben azzal, hogy a window.locatio{filter}n ugyanabban a dokumentumban marad, ha csak hash van beállítva.
l Az URL-t módosíthatatlanul hagyhatod, ha nem szükséges. Összehasonlításképpen: a window.locatio{filter}n = "#foo"; Csak új történeti entitásokat generálnak, ha a jelenlegi hash nem #foo
Tetszőleges adatokat társíthatsz az új történeti entitásoddal. Hash-alapú megközelítésnél minden releváns adatot egy rövid láncsorba kell kódolni.
Fontos megjegyezni, hogy a pushState() metódus nem teszi a hash-változtatási időt, még akkor sem, ha a régi és az új URL-ek csak különböző hashek.
replaceState() metódus
a history.replaceState() nagyon hasonlóan a pushState(), csak a replaceState() a jelenlegi előzmény entitásának módosítására szolgál, nem pedig újat hozna létre. Ez a módszer néha hasznos lehet, amikor egy állapotobjektumot vagy az aktuális előzmény entitását kell frissítened bizonyos felhasználói viselkedésre, és használhatod az állapotobjektum vagy az aktuális történet entitásának URL-jét is.
Popstate esemény
Amikor a történeti entitás megváltozik, a popstate esemény következik be. Ha a történet entitását a pushState és replaceState metódusok generálják, a popstate esemény állapot attribútumja tartalmazza a history entity állapotobjektumának másolatát
Részletekért lásd a window.onpopstate oldalt
Olvassa el a jelenlegi állapotot
Olvassa el a meglévő állapotot
Amikor az oldal betöltődik, lehet, hogy nem üres állapotobjektum is van. Ez akkor fordulhat elő, amikor az oldal állapotobjektumot állít be (pushState vagy replaceState használatával), és a felhasználó újraindítja a böngészőt. Amikor az oldal újratöltődik, az oldal betöltési eseményt kap, de nem lesz popstate esemény. Azonban, ha elolvasod a history.state tulajdonságot, akkor ezt az állapotobjektumot a popstate esemény után kapod meg
History.pushState() dokumentáció: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
A fogadó URL paramétere a típus string, amelyet a jelenlegi címsoros URL-jének megváltoztatására használnak. Egy fontos megjegyezni, hogy ez a paraméter nem lehet ugyanaz, mint a cross-domain, vagyis a protokollnak, a domain névnek és a portnak ugyanaznak kell lennie.
Uncaught DOMException: Nem sikerült végrehajtani a 'pushState'-et a 'History'-n: Egy 'http://www.test.com/' URL-rel rendelkező history state objektum nem hozható létre egy eredetű dokumentumban https://www.itsvse.com' és URL 'https://www.itsvse.com/'.
<anonymous>:1:9-nél
Helyes kód:
|
Közzétéve 2017. 09. 12. 13:55:04
|
|
|
|
Közzétéve 2017. 10. 27. 9:51:10