le rafraîchissement d'une page après l'état poussé modifie l'url du navigateur ; il me dit que la page n'existe pas

Question

J'ai lu de nombreux tutoriels et exemples sur popstate et pushstate et j'ai suivi de près l'exemple des docteurs HTML5 à l'adresse suivante http://html5doctor.com/demos/history/ . Le tutoriel fonctionne très bien, et tout se passe bien lorsque je l'essaie par moi-même. Mais, par exemple, après avoir cliqué sur quelques liens et décidé de rafraîchir la page, je reçois une page non trouvée. Y a-t-il d'autres éléments dans le tutoriel, comme d'autres dossiers existant ailleurs avec d'autres fichiers ? En fait, ce que j'ai fait, c'est copier la source exacte à partir du lien du tutoriel ci-dessus, et la mettre sur mon serveur local. Comme je l'ai dit, tout fonctionne bien avec les boutons "back" et "forward" du navigateur, ainsi que les boutons "pop" et "push", mais l'actualisation de la page tente de charger une page qui n'existe pas. J'ai lu quelque part qu'il fallait modifier le fichier htaccess pour rediriger vers l'index si la page n'existe pas, mais cela n'a pas fonctionné pour moi. Je ne sais pas si j'ai besoin de plus pour que ça marche tout seul, mais j'ai besoin de plus. Le code que j'utilise est exactement le même que celui des tutoriels, donc tout peut être trouvé dans la source.

http://html5doctor.com/demos/history/

htaccess se présente comme suit

Options +FollowSymLinks  
<ifModule mod_rewrite.c>  
RewriteEngine On  
RewriteCond %{REQUEST_FILENAME} !-f  
RewriteCond %{REQUEST_FILENAME} !-d  
RewriteCond %{REQUEST_URI} !index  
RewriteRule (.*) index.html [L]  
</ifModule>

Answer 1

La réponse est simple. Faites en sorte que la page existe, ou utilisez .htaccess pour faire "semblant" qu'elle existe en chargeant un URI différent.

Lorsque vous utilisez pushstate, vous changez l'url du navigateur, mais le navigateur ne fait rien pour vérifier que cette url existe réellement. C'est à vous de le faire. N'envoyez pas au navigateur une url qui n'existe pas réellement ou qui ne fonctionnera pas d'elle-même.

En ce qui concerne le htaccess "qui ne fonctionne pas pour vous", vous devez nous fournir plus d'informations à ce sujet. Il est probable que vous ne l'ayez pas configuré correctement.

Answer 2

Le comportement que vous observez est une bonne démonstration du fonctionnement de pushState. Lorsque vous essayez de rafraîchir la page, vous constatez que l'URL n'existait même pas sur le serveur - le navigateur l'a falsifiée.

Si vous voulez vraiment que la démo fonctionne sur votre serveur lorsque vous rafraîchissez les pages, débarrassez-vous de l'option .htaccess et copiez ces fichiers sur votre serveur :

http://html5doctor.com/demos/history/ -> /path/to/demo/index.html

http://html5doctor.com/demos/history/fluffy -> /path/to/demo/fluffy

http://html5doctor.com/demos/history/socks -> /path/to/demo/socks

http://html5doctor.com/demos/history/whiskers -> /path/to/demo/whiskers

http://html5doctor.com/demos/history/bob -> /path/to/demo/bob

Maintenant, lorsque vous naviguez vers http://your.server/path/to/demo/ vous devriez voir que cela fonctionne, même si vous naviguez pour dire "fluffy" et que vous rafraîchissez ensuite la page. (En tout cas, cela fonctionne pour moi).

D'ailleurs, ce tutoriel n'est qu'une introduction à pushState(), pas un exemple à suivre. Comme le dit l'auteur

Le code comprend quelques styles simples et modifie dynamiquement le contenu lorsque vous cliquez sur les liens. En réalité, il pourrait être chargé depuis votre serveur via XMLHttpRequest, mais pour les besoins de cette démonstration, je l'ai regroupé dans un fichier autonome. L'important, c'est que nous disposons d'une page dynamique rapide et pratique, alors commençons à nous amuser !

Un tutoriel légèrement meilleur, que vous avez peut-être déjà vu, est celui intitulé Diving into HTML5 (Plonger dans le HTML5) Introduction à l'histoire .

Cependant, vous allez probablement utiliser une librairie js pour gérer pushState pour vous, donc vous pouvez aussi commencer avec eux. Les deux que je connais le mieux sont :

• pjax
• HTMLDecor

HTMLDecor est mon projet et n'est pas vraiment une solution pour pushState(). C'est juste que le support de pushState() est gratuit (vraiment) lorsque vous suivez ses lignes directrices pour la création d'un site.