web-dev-qa-db-fra.com

Bon tutoriel pour utiliser HTML5 History API (Pushstate?)

Je cherche à utiliser l'API de l'historique HTML5 pour résoudre des problèmes de liaison profonds avec le contenu chargé AJAX, mais j'ai du mal à décoller. Est-ce que quelqu'un connaît de bonnes ressources?

Je veux utiliser ceci, car cela semble être un excellent moyen de permettre à JS de ne pas activer les liens. De nombreuses solutions échouent lorsqu'une personne avec JS envoie un lien à une autre personne.

Ma recherche initiale semble indiquer une API d’historique au sein de JS et la méthode pushState.

http://html5demos.com/history

javascripthtml5pushstatehtml5-history
168
Mild Fuzz

Pour un bon tutoriel, la page Réseau de développeurs Mozilla sur cette fonctionnalité est tout ce dont vous avez besoin: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Malheureusement, l’API d’historique HTML5 est implémentée différemment dans tous les navigateurs HTML5 (ce qui la rend incohérente et boguée) et n’a aucune solution de secours pour les navigateurs HTML4. Heureusement, History.js assure la compatibilité croisée des navigateurs HTML5 (garantissant que tous les navigateurs HTML5 fonctionnent comme prévu) et fournit éventuellement un repli par hachage pour les navigateurs HTML4 (y compris la prise en charge maintenue des données, des titres, des pushState). et remplacer la fonctionnalité État).

Vous pouvez en savoir plus sur History.js ici: https://github.com/browserstate/history.js

Pour un article sur Hashbangs VS Hash VS HTML5 History API, voir ici: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

181
balupton

"Plongez dans HTML 5" m'a beaucoup apporté. L'explication et la démo sont plus simples et pertinentes. Chapitre d'histoire - http://diveintohtml5.info/history.html et démo d'histoire - http://diveintohtml5.info/examples/history/fer.html

33
Kiran Aghor

Gardez à l'esprit lorsque vous utilisez HTML5 pushstate si un utilisateur copie ou marque-pages d'un lien profond et le visite à nouveau, ce sera un hit direct sur le serveur qui sera 404 donc vous devez être prêt et même une bibliothèque pushstate js ne vous aidera pas. toi. La solution la plus simple consiste à ajouter une règle de réécriture à votre serveur Nginx ou Apache, comme suit:

Apache (dans votre vhost si vous en utilisez un):

<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;
27
Mauvis Ledford

Le spec historique de HTML5 est original.

history.pushState() ne distribue pas un événement popstate ni ne charge une nouvelle page par elle-même. C'était seulement pour pousser l'état dans l'histoire. Ceci est une fonctionnalité "annuler" pour les applications de page unique. Vous devez distribuer manuellement un événement popstate ou utiliser history.go() pour accéder au nouvel état. L'idée est qu'un routeur peut écouter popstate événements et faire la navigation pour vous.

Quelques points à noter:

  • history.pushState() et history.replaceState() ne distribuent pas les événements popstate.
  • history.back(), history.forward() et les boutons précédent et suivant du navigateur distribuent les événements popstate.
  • history.go() et history.go(0) effectuent un rechargement de page complète sans envoyer d'événements popstate.
  • history.go(-1) (page précédente) et history.go(1) (page suivante) distribuent les événements popstate.

Vous pouvez utiliser l'API d'historique comme ceci pour envoyer un nouvel état ET envoyer un événement popstate.

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

Ensuite, écoutez les événements popstate avec un routeur.

5
Erik Ringsmuth

Voici une excellente projection d’écran sur le sujet réalisée par Ryan Bates. À la fin, il désactive simplement la fonctionnalité ajax si la méthode history.pushState n'est pas disponible:

http://railscasts.com/episodes/246-ajax-history-state

4
deb

Vous pouvez essayer Davis.js , il vous donne le routage dans votre JavaScript en utilisant pushState lorsque disponible et sans JavaScript, il permet à votre code côté serveur de traiter les requêtes.

4
Oliver Nightingale

Vous voudrez peut-être jeter un coup d'œil à ce plugin jQuery. Ils ont beaucoup d'exemples sur leur site. http://www.asual.com/jquery/address/

2
Nathan Totten

J'ai écrit une abstraction de routeur très simple au-dessus de History.js, appelée StateRouter.js . C'est au tout début du développement, mais je l'utilise comme solution de routage dans une application d'une page que j'écris. Comme vous, j’ai trouvé History.js très difficile à comprendre, d’autant plus que j’étais assez nouveau en JavaScript, jusqu’à ce que je comprenne que vous avez vraiment besoin (ou devriez avoir) une abstraction de routage par dessus, car elle résout les problèmes de bas niveau. problème.

Cet exemple de code simple devrait montrer comment il est utilisé:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

Voici un peu violon Je l'ai concocté afin de démontrer son utilisation.

2
aknuds1

si jQuery est disponible, vous pouvez utiliser BBQ jQuery

1
sprugman