Bon tutoriel pour l'utilisation de l'API HTML5 History (pushState?) [Fermé]

StackOverflow https://stackoverflow.com/questions/4015613

Question

Je suis à la recherche en utilisant l'API HTML5 History pour résoudre les problèmes de liens profonds avec le contenu chargé AJAX, mais je me bats pour descendre au sol. Est-ce que quelqu'un sait de toute bonnes ressources?

Je veux l'utiliser comme il semble un excellent moyen de permettre la possibilité de ceux qui sont envoyés les liens ne peuvent être JS sous tension. De nombreuses solutions échouent lorsque quelqu'un avec JS envoie un lien vers quelqu'un sans.

Ma recherche initiale semble pointer vers une API d'histoire au sein de JS, et la méthode pushState.

http://html5demos.com/history

Était-ce utile?

La solution

Pour un tutoriel de la page Mozilla Developer Network sur cette fonctionnalité est tout ce dont vous aurez besoin: https : //developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Malheureusement, l'API HTML5 History est mis en œuvre différemment dans tous les navigateurs HTML5 (ce qui rend incohérent et voiturette) et n'a pas de repli pour les navigateurs HTML4. Heureusement, History.js offre la compatibilité croisée pour les navigateurs HTML5 (assurant tous les navigateurs HTML5 fonctionnent comme attendu) et fournit facultativement un hachage de repli pour les navigateurs HTML4 (y compris support maintenu pour des données, des titres, et la fonctionnalité pushState replaceState).

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

Pour un article sur Hashbangs VS Hashes VS API HTML5 Histoire, voir ici: https://github.com/browserstate/history.js/wiki/Intelligent -state de traitement

Autres conseils

Je bénéficiais beaucoup de « Plongez dans HTML 5 ». L'explication et démonstration sont plus faciles et au point. chapitre Histoire - http://diveintohtml5.info/history.html et démonstration de l'histoire - http://diveintohtml5.info/examples/history/fer.html

Gardez à l'esprit tout en utilisant HTML5 pushState si un utilisateur copie ou signets un lien profond et visites encore, alors ce sera un coup direct au serveur qui sera 404 si vous devez être prêt pour cela et même bibliothèque gagné js un pushState « t vous aider. La solution la plus simple est d'ajouter une règle de réécriture à votre serveur Apache ou Nginx comme ceci:

Apache (dans votre vhost si vous 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;

Le spécification HTML5 histoire est décalé.

history.pushState() ne distribue pas un événement popstate ou charger une nouvelle page par lui-même. Il était seulement destiné à pousser l'Etat dans l'histoire. Ceci est une fonction « undo » pour les applications d'une seule page. Vous devez envoyer 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.

Il y a des choses à noter:

  • history.pushState() et history.replaceState() ne distribuent pas d'événements de popstate.
  • history.back(), history.forward(), et à l'arrière du navigateur et les boutons avant de faire des événements popstate d'expédition.
  • history.go() et history.go(0) faire un reload pleine page et ne distribuent pas d'événements de popstate.
  • history.go(-1) (retour 1 page) et history.go(1) (avant 1 page) font des événements popstate d'expédition.

Vous pouvez utiliser l'API d'histoire comme celui-ci pour pousser un nouvel état et l'envoi d'un événement popstate.

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

Alors écouter les événements popstate avec un routeur.

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

Voici un grand écran moulé sur le sujet par Ryan Bates de Railscasts. A la fin, il désactive simplement la fonctionnalité ajax si la méthode de history.pushState n'est pas disponible:

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

Vous pouvez jeter un oeil à ce plugin jQuery. Ils ont beaucoup d'exemples sur leur site. http://www.asual.com/jquery/address/

J'ai écrit une abstraction de routeur très simple sur le dessus de History.js, appelé StateRouter.js . Il est à un stade très précoce de leur développement, mais je l'utilise comme solution de routage dans une application unique page J'écris. Comme vous, j'ai trouvé History.js très difficile à saisir, d'autant plus que je suis tout à fait nouveau pour JavaScript, jusqu'à ce que je compris que vous avez vraiment besoin (ou devrait avoir) une abstraction routage sur le dessus de celui-ci, car il résout un faible niveau problème.

Ce code simple exemple doit 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 petit violon que j'ai concoctée afin de démontrer son utilisation.

si jQuery est disponible, vous pouvez utiliser jQuery BBQ

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top