Julkaistu Gecko2:n jälkeen (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 esittelee kaksi menetelmää, histtory.pushState() ja history.replaceState(), jotka mahdollistavat historian entiteettien lisäämisen ja muokkaamisen. Samaan aikaan nämä menetelmät toimivat window.onpostate-tapahtuman kanssa.
Muokkaa viittaajaa history.pushState()-menetelmällä, jota voidaan käyttää xmlhttpRequest-objektin http-otsikossa tilan muokkauksen jälkeen. Tämä viittaaja on dokumentin URL-osoite, kun XMLHttpRequest luotiin.
pushStatea käytetään lisäämään nykyisen sivun tietue historiaan, kun taas replaceState ja pushState toimivat täsmälleen samalla tavalla, ainoa ero on, että sitä käytetään muokkaamaan nykyisen sivun tietuetta historiassa.
esimerkki
Oletetaan http://mozilla.org/foo.html että sivu suorittaa JS:n
var stateObj = { foo: "viiva" }; history.pushState(stateObj, "sivu 2", "bar.html");
Tämä menetelmä saa URL-osoitepalkin näyttämään http://mozilla.org/bar.html,Mutta selain ei lataa bar.html sivua, vaikka se olisi olemassa。
Oletetaan jälleen, että käyttäjä jatkaa http://google.com:n käyttöä ja klikkaa takaisin. Tällöin URL-osoitepalkki saa http://mozilla.org/bar.html sivulle popstate-tapahtuman (chrome), joka sisältää kopion stateObj:stä. Tämä sivu näyttää foo.html. +
Tässä vaiheessa klikkaamme uudelleen, ja URL kääntyy http://mozilla.org/foo.html,document saa uuden popstate-tapahtuman ja null state -objektin. Tämä palautustoiminto ei muuta asiakirjan sisältöä. (Ehkä jonkin ajan kuluttua se yrittää latautua...) kromi)
pushState-menetelmä
pushState() sisältää kolme parametria: state-objekti, otsikko (nyt sivuutettu, käsittelemätön), URL (valinnainen). Yksityiskohtia:
· tilaobjekti – Tilaobjekti on Javascrip{filter}t-olio, joka liittyy uuteen historian entiteettiin, joka on luotu pushState()-menetelmällä. Sitä käytetään tallentamaan tietoja niistä merkinnöistä, jotka haluat lisätä historiaan. Tilaobjekti voi olla mikä tahansa Json-merkkijono. Koska Firefox käyttää käyttäjän kiintolevyä tilaobjektin avaamiseen, tämän objektin maksimitallennustila on 640k. Jos se on suurempi kuin tämä arvo, pushState()-menetelmä heittää poikkeuksen. Jos tarvitset lisää tilaa säilytystilaan, käytä paikallista varastointia.
· otsikko—Firefox sivuuttaa tämän parametrin nyt, vaikka sitä saatetaan käyttää tulevaisuudessa. Turvallisin tapa käyttää sitä nyt on välittää tyhjä merkkijono estääksesi tulevat muutokset. Tai voit lähettää lyhyen omistustodistuksen osoittamaan osavaltion
· URL - Tätä parametria käytetään uuden historian kohteen URL-osoitteen välittämiseen, huomaa, että selain ei lataa tätä URL-osoitetta pushState()-metodin kutsumisen jälkeen. Mutta ehkä jonkin ajan kuluttua se yrittää ladata tämän URL-osoitteen. Esimerkiksi, kun käyttäjä käynnistää selaimen uudelleen, uusi URL ei voi olla absoluuttinen polku. Jos se on suhteellinen polku, se on suhteellinen olemassa olevaan URL-osoitteeseen. Uuden url:n täytyy olla samanlainen kuin olemassa oleva url, muuten pushState() heittää poikkeuksen. Tämä parametri on vapaaehtoinen, ja jos se on tyhjä, se asetetaan dokumentin nykyiseksi URL-osoitteeksi.
Tietyssä mielessä pushState()-metodin kutsuminen on kuin asettaa window.locatio{filter}n = "#foo", jotka molemmat luovat ja aktivoivat toisen historian entiteettiä, joka liittyy nykyiseen dokumenttiin, mutta pushState():lla on joitakin lisäetuja:
Uusi URL voi olla mikä tahansa URL, joka on samassa domainissa kuin nykyinen URL, toisin kuin window.locatio{filter}n pysyy samassa asiakirjassa, jos vain hajautus on asetettu.
l Voit jättää URL-osoitteen muuttamattomaksi, jos ei ole tarvetta. Vertailun vuoksi aseta window.locatio{filter}n = "#foo"; Vain uudet historialliset entiteettit generoidaan, jos nykyinen tiivisteesi ei ole #foo
Voit liittää mielivaltaisia tietoja uuteen historia-entiteettiisi. Hajautuspohjaisessa lähestymistavassa kaikki asiaankuuluva data täytyy koodata lyhyeksi merkkijonoksi.
Huomaa, että pushState()-metodi ei aiheuta hajautusaikaa, vaikka vanha ja uusi url-osoitteet olisivatkin vain eri hajautuksia.
replaceState()-metodi
history.replaceState() käytetään paljon samalla tavalla kuin pushState(), paitsi että replaceState() muokkaa nykyistä historian entiteettiä uuden luomisen sijaan. Tämä menetelmä voi joskus olla hyödyllinen, kun sinun täytyy päivittää tilaolio tai nykyinen historian entiteetti tietyn käyttäjän käyttäytymisen vuoksi, ja voit käyttää sitä päivittääksesi tilaobjektin URL-osoitteen tai nykyisen historian entiteettiä.
Popstate-tapahtuma
Kun historian entiteetti muuttuu, tapahtuu popstate-tapahtuma. Jos historia-entiteetti luodaan pushState- ja replaceState-metodeilla, popstate-tapahtuman tilaattribuutti sisältää kopion tila-oliosta historia-entiteettiin
Katso lisätietoja windows.onpopstate
Lue nykytilanne
Lue olemassa oleva tila
Kun sivu latautuu, sillä voi olla ei-tyhjä tilaobjekti. Tämä voi tapahtua, kun sivu asettaa tilaobjektin (pushState- tai replaceState-toiminnolla) ja käyttäjä käynnistää selaimen uudelleen. Kun sivu latautuu uudelleen, sivu saa lataustapahtuman, mutta popstate-tapahtumaa ei ole. Kuitenkin, jos luet history.state-ominaisuuden, saat tämän tilaobjektin popstate-tapahtuman jälkeen
History.pushState() dokumentaatio: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Vastaanottavan URL-osoitteen parametri on tyyppimerkkijono, jota käytetään vaihtamaan nykyisen osoiterivin URL-osoitetta. Yksi huomionarvoinen asia on, että tämä parametri ei voi olla sama kuin cross-domain, eli protokollan, verkkotunnuksen ja portin on oltava samat.
Uncaught DOMException: Epäonnistui 'pushState'-suorituksessa 'History': History state -oliota URL-osoitteella 'http://www.test.com/' ei voida luoda dokumentissa, jonka alkuperä on ' https://www.itsvse.com' ja URL 'https://www.itsvse.com/'.
suhteessa <anonymous>:1:9
Oikea koodi:
|
Julkaistu 12.9.2017 13.55.04
|
|
|
|
Julkaistu 27.10.2017 9.51.10