Představeno od Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 zavádí dvě metody, histtory.pushState() a history.replaceState(), které umožňují přidávání a úpravu historických entit. Současně tyto metody pracují s událostí window.onpostate.
Upravte referrer pomocí metody history.pushState(), kterou lze použít v http hlavičce vytvořené pro objekt xmlhttpRequest po úpravě stavu. Tento referrér bude URL dokumentu v okamžiku vytvoření XMLHttpRequest.
pushState se používá k přidání záznamu aktuální stránky do historie, zatímco replaceState a pushState se používají úplně stejně, jediný rozdíl je v tom, že se používá k úpravě záznamu aktuální stránky v historii.
příklad
Předpokládejme, že http://mozilla.org/foo.html stránka vykoná JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
Tato metoda způsobí, že adresní lišta URL zobrazí http://mozilla.org/bar.html,Ale prohlížeč bar.html stránku nenačte, i kdyby existovala。
Nyní opět předpokládejme, že uživatel pokračuje v přístupu k http://google.com a klikne zpět. V tuto chvíli se adresa URL http://mozilla.org/bar.html stránka zobrazí událost popstate (chrome), která bude obsahovat kopii stateObj. Tato stránka vypadá jako foo.html. +
V tomto bodě klikneme zpět a URL se změní http://mozilla.org/foo.html,document zobrazí se další popstate event a objekt null state. Tento návrat nemění obsah dokumentu. (Možná se po chvíli pokusí načíst...) chrom)
Metoda pushState
pushState() má tři parametry: stavový objekt, titul (nyní ignorován, nezpracovaný), URL (volitelné). Specifika:
· stavový objekt – Stavový objekt je Javascrip{filter}t, který se vztahuje k nové historické entitě vytvořené metodou pushState(). Používá se k ukládání informací o záznamech, které chcete vložit do historie. Objektem stavu může být jakýkoli řetězec Json. Protože Firefox používá pevný disk uživatele k přístupu ke stavovému objektu, maximální úložný prostor tohoto objektu je 640k. Pokud je větší než tato hodnota, metoda pushState() vyhodí výjimku. Pokud potřebujete více místa na skladování, použijte lokální úložiště.
· název – Firefox tento parametr nyní ignoruje, i když může být použit v budoucnu. Nejbezpečnější způsob, jak ho nyní použít, je předat prázdný řetězec, aby se zabránilo budoucím úpravám. Nebo můžete předat krátký titul, který označuje stát
· URL – Tento parametr slouží k předání URL nové entity historie, přičemž prohlížeč tuto URL po zavolání metody pushState() nenačte. Ale možná se po čase pokusí načíst tuto URL. Například po restartu prohlížeče uživatelem nemůže být nová URL absolutní cestou. Pokud je to relativní cesta, pak bude relativní vůči existující URL. Nová URL musí být kodoména s existující URL, jinak pushState() vyhodí výjimku. Tento parametr je volitelný a pokud je prázdný, bude uveden jako aktuální URL dokumentu.
V jistém smyslu je volání metody pushState() podobné nastavení window.locatio{filter}n = "#foo", přičemž obě vytvářejí a aktivují další historickou entitu spojenou s aktuálním dokumentem, ale pushState() má několik dalších výhod:
Nová URL může být jakákoli URL, která je ve stejné doméně jako aktuální URL, na rozdíl od toho, aby window.locatio{filter}n zůstala ve stejném dokumentu, pokud je nastaven pouze hash.
L: URL můžete nechat neupravenou, pokud nemusíte. Pro srovnání, nastavte window.locatio{filter}n = "#foo"; Generují se pouze nové historické entity, pokud váš současný hash není #foo
Můžete libovolná data přiřadit k nové historické entitě. U přístupu založeného na hashu je potřeba všechna relevantní data zakódovat do krátkého řetězce.
Všimněte si, že metoda pushState() nezpůsobuje hashchange time, i když stará a nová URL jsou jen různé hashe.
metoda replaceState()
history.replaceState() se používá podobně jako pushState(), s tím rozdílem, že replaceState() slouží k úpravě aktuální historické entity místo vytvoření nové. Tato metoda může být někdy užitečná, když potřebujete aktualizovat stavový objekt nebo entitu aktuální historie v reakci na určité chování uživatele, a můžete ji použít k aktualizaci URL stavového objektu nebo entity aktuální historie.
Událost PopState
Když se změní historická entita, nastane událost popstate. Pokud je entita history generována metodami pushState a replaceState, atribut stav události popstate bude obsahovat kopii objektu stavu z entity history
Podrobnosti najdete na window.onpopstate
Přečtěte si aktuální stav
Přečtěte si stávající stav
Při načtení stránky může mít objekt neprázdného stavu. To se může stát, když stránka nastaví stavový objekt (pomocí pushState nebo replaceState) a uživatel restartuje prohlížeč. Když se stránka znovu načte, stránka obdrží událost při načtení, ale žádná událost popstate nenastane. Pokud si ale přečtete vlastnost history.state, dostanete tento stavový objekt až po události popstate
Dokumentace History.pushState(): https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Parametr přijímající URL je typ string, který se používá ke změně URL aktuálního adresního řádku. Jedna věc, kterou je třeba poznamenat, je, že tento parametr nemůže být stejný jako cross-domain, tedy protokol, doménové jméno a port musí být stejné.
Nezachycený DOMException: Nepodařilo se spustit 'pushState' na 'Historii': Objekt history state s URL 'http://www.test.com/' nelze vytvořit v dokumentu s původem ' https://www.itsvse.com' a URL 'https://www.itsvse.com/'.
na <anonymous>:1:9
Správný kód:
|
Zveřejněno 12.09.2017 13:55:04
|
|
|
|
Zveřejněno 27.10.2017 9:51:10