J'essaie d'implémenter la navigation de contenu comme c'est fait sur Facebook lorsque l'utilisateur parcourt les photos. Je suppose que tout le monde est familier avec cette navigation photo où vous pouvez cliquer sur "suivant" et "précédent" et obtenir immédiatement la photo suivante ou précédente (vous pouvez également naviguer en utilisant les touches fléchées). Lorsque vous cliquez sur "Suivant", par exemple, vous remarquez que la page ne s'actualise pas - seulement le contenu. Au début, je pensais que c'est fait en utilisant des appels ajax ordinaires qui rafraîchissent seulement le "contenu" dans ce cas l'image, la description et les commentaires. Mais alors j'ai remarqué que l'URL dans la barre d'outils "Emplacement" de mon navigateur est également modifiée! J'ai essayé d'inspecter cela en utilisant Firebug et j'ai découvert que lorsque vous cliquez sur "next", seule la photo suivante est téléchargée et je ne sais toujours pas d'où proviennent les métadonnées image (description, heure, tags, ...) chargé. Est-ce que quelqu'un peut expliquer comment cette technique est faite - l'URL de la page change sans rafraîchissement de la page (ou même sans page "clignotant" si elle rafraîchit du cache). Je sais comment changer le contenu de la page en utilisant ajax mais l'URL de cette page reste la même tout le temps. Si je clique sur le bouton "Actualiser", j'obtiens à nouveau la première page. Mais pas sur Facebook puisque même le "window.location" est changé à chaque fois sans redirection réelle.Page "Rediriger" sans rafraîchissement (style de photos Facebook)
L'autre chose que j'ai remarqué est que la barre d'outils inférieure (applications, chat, ...) est "toujours au top". Même si vous changez la page, cette barre d'outils n'est pas actualisée et reste toujours en haut - elle ne clignote même pas comme les autres pages qui sont actualisées (à partir du serveur Web ou du cache local). Je suppose que c'est la même technique que ci-dessus - une sorte de "faux" redirections ou quelque chose?
La réponse est pushState
if (window.history.pushState)
window.history.pushState([object or string], [title], [new link]);
Vous sourire :)
Pour ce que ça vaut la peine [ History.js] (https://github.com/balupton/History.js) fournit la même API HTML5 tout en dégradant tout navigateur qui ne le prend pas en charge (y compris la prise en charge des données et des titres, et la fonctionnalité replaceState). L'utilisation de cela signifierait que vous n'auriez pas à modifier votre code pour les changements IE9. – balupton