Böngészési előzmények módosítása összetett alkalmazásokban
... csak nyomja meg a gombot a böngészőben.
A levél tartalma bezárul és megnyílik egy betűs betűs oldal, ahol a felhasználó az üzenet tartalmának megnyitása előtt megnyitotta. És ha ez egy új böngésző lap? A visszatérési gomb nem működik, és nem lehet megnyomni. Probléma van. Az e-mail ellenőrzése nem támogatott az egyik böngészőben, a legtöbb felhasználó ezt megértette. De vannak megoldások! Egyesek a rács (# név) megváltoztatásához kapcsolódnak az URL-ben, így az állam nem menthető. Ez nem ideális, de minden böngészőben működik.
Szerencsére a probléma megoldódott a HTML5 history.pushState és a history.replaceState módszerek segítségével, az események window.onpopstate-rel együtt.
demó
A technika meglepően egyszerű:
- Ha például egy állapot megváltozik, például amikor a felhasználó megnyit egy e-mailt, a history.pushState () az állapotot és a végrehajtási adatokat továbbítja. Ez lehetővé teszi a gomb vissza, és ami a legfontosabb, nem váltja a felhasználót az oldalról.
- A history.pushState () függvényt annyiszor futtathatja, ahányszor szükséges, vagy megváltoztathatja az aktuális állapotot a history.replaceState () függvénnyel.
- Amikor a felhasználó visszalép (vagy előre), az ablak.onpopstate esemény aktiválódik. A kezelői funkciók hozzárendelhetnek egy társult állapotot és megjeleníthetik a megfelelő fület.
Ennek hátránya, hogy nem kompatibilis az IE-vel a 10-es verzióval. Ha az IE9-ben és az alatt is szüksége van, számos más megoldás létezik, például a History.js és a HTML5 History API.
Írjuk a kódot. Tegyük fel, hogy megjelenik az Ajax kérés eredménye:
A history.replaceState () ugyanazokkal az argumentumokkal rendelkezik, és akkor használjuk, ha az aktuális állapotot újra kívánjuk cserélni.
Funkciókezelő, amely a "back" gomb vagy a "továbblépés" gomb megnyomásával indul el a böngészőben:
Az URL helyét a document.location (document.location.search és document.location.hash visszatérési paraméterek és a hash-nevek megfelelően adhatja meg).
A PushState () vagy replaceState () objektum állapota az ingatlan állapot esemény objektumaiból származik. Ezeket az információkat a megfelelő képernyő megjelenítéséhez használhatja.
Kattintson a history.pushState gombra többször, majd térjen vissza, hogy lássa, mi történik a naplóban.