HTML5 History

Zjednodušeně řečeno umožňuje měnit část URL za doménou na libovolnou hodnotu. V kombinaci s AJAXem tak dokáže velmi zrychlit procházení webu nebo aplikace.

Příklady

1. Mezi prvními nasadil Github na procházení adresářovou strukturou. Ve stránce se mění jen obsah (načítaný AJAXem), hlavička i patička se znovu nenačítají. Stránka nereloaduje a obsah se načítá s pomocí animace.
2. Tady je jednodušší příklad: http://html5.gingerhost.com

Technikálie

Objekt history má v HTML5 několik nových metod:

history.pushState(stateObj, title, url)

• přidá nový záznam do historie prohlížení
• stateObj - povinný serializovaný objekt, který reprezentuje záznam, např. s hodnotou názvu stránky
• title - titulek stavu; povinný parametr, který ale všechny prohlížeče ignorují
• url - nepovinný string s novou hodnotou adresy
• např. history.pushState(null, null, "/nove-url")

history.replaceState(stateObj, title, url)

• totéž jako pushState(), jen nevytváří nový záznam v historii

history.state

• vrací hodnotu aktuálního záznamu v historii

window.onpopstate

• událost, kterou vyvolá jakákoliv pokus o vydání jiného záznamu z historie procházení (history.pushState(), načtení nové stránky, tlačítko zpět v prohlížeči)

Podpora v prohlížečích

Všechny moderní (i mobilní prohlížeče) a IE10+. Pokud potřebujete podporu v IE9 a starších, využijte skvělý a ověřený polyfill History.JS.