javascript - God veiledning for bruk av HTML5 History API (Pushstate?)

Jeg ser på å bruke HTML5 History API for å løse problemer med dypkobling for AJAX-lastet innhold, men jeg sliter med å komme i gang. Vet noen om noen gode ressurser?

Jeg vil bruke dette da det virker som en flott måte å tillate muligheten for at de som får tilsendt lenkene kanskje ikke har JS aktivert. Mange løsninger feiler når noen med JS sender en lenke til noen uten.

Min første forskning ser ut til å peke på en History API innen JS, og pushState-metoden.

http://html5demos.com/history

Svar #1

For en flott veiledning er Mozilla Developer Network-siden om denne funksjonaliteten alt du trenger: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Dessverre er HTML5 History API implementert forskjellig i alle HTML5-nettlesere (noe som gjør det inkonsekvent og feilaktig) og har ingen fallback for HTML4-nettlesere. Heldigvis gir History.js krysskompatibilitet for HTML5-nettlesere (som sikrer at alle HTML5-nettlesere fungerer som forventet) og tilbyr valgfritt en hash-fallback for HTML4-nettlesere (inkludert vedlikeholdt støtte for data, titler, pushState og replaceState-funksjonalitet).

Du kan lese mer om History.js her: https://github.com/browserstate/history.js

For en artikkel om Hashbangs VS Hashes VS HTML5 History API, se her: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

Svar #2

Jeg hadde stor nytte av 'Dive into HTML 5'. Forklaringen og demonstrasjonen er enklere og rett på sak. Historiekapittel - http://diveintohtml5.info/history.html og historiedemonstrasjon - http://diveintohtml5.info/examples/history/fer.html

Svar #3

Husk at når du bruker HTML5 pushstate, hvis en bruker kopierer eller bokmerker en dyp lenke og besøker den igjen, vil det være et direkte serverkall som vil returnere 404, så du må være forberedt på det, og selv et pushstate JS-bibliotek vil ikke hjelpe deg. Den enkleste løsningen er å legge til en omskrivingsregel på din Nginx- eller Apache-server på denne måten:

Apache (i din vhost hvis du bruker en):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx

rewrite ^(.+)$ /index.html last;

Relaterte artikler