302 votes

Modifiez l’URL dans le navigateur sans charger la nouvelle page à l’aide de JavaScript

Comment aurais-je une action JavaScript qui peut avoir des effets sur la page en cours, mais modifierait également l’URL dans le navigateur de sorte que si l’utilisateur hits rechargement ou mettre en signet la nouvelle URL est utilisé ?

Aussi, ce serait bien si le bouton back rechargeait l’URL d’origine.

Je suis en train d’enregistrer l’état de JavaScript dans l’URL.

187voto

Matthew Crumley Points 47284

Si vous voulez qu'il fonctionne dans les navigateurs qui ne supportent pas l' history.pushState et history.popState encore, le "vieux" solution consiste à définir l'identificateur de fragment, qui ne cause pas un rechargement de la page.

L'idée de base est de définir l' window.location.hash de la propriété à une valeur qui contient tout ce que l'état des informations dont vous avez besoin, puis utilisez la fenêtre.onhashchange événement, ou pour les anciens navigateurs qui ne supportent pas l' onhashchange (IE < 8, Firefox < 3.6), vérifier régulièrement pour voir si le hachage a changé (à l'aide d' setInterval par exemple) et de mettre à jour la page. Vous aurez aussi besoin de vérifier la valeur de hachage au chargement de la page pour définir le contenu initial.

Si vous utilisez jQuery, il y a un hashchange plugin qui va l'utiliser quelle que soit la méthode le navigateur prend en charge. Je suis sûr qu'il y a des plugins pour les autres bibliothèques.

Une seule chose à faire attention est de collision avec des id sur la page, parce que le navigateur ne faites défiler jusqu'à n'importe quel élément avec un id correspondant.

123voto

clu3 Points 642

Avec HTML 5, utiliser le `` fonction. A titre d’exemple :

et un href :


Si vous souhaitez modifier l’URL sans ajouter une entrée à la liste du bouton "retour", utilisation `` à la place.

37voto

moonshadow Points 28302

de la fenêtre.emplacement.href contient l'URL actuelle. Vous pouvez lire, vous pouvez ajouter, et vous pouvez les remplacer, ce qui peut causer un rechargement de la page.

Si, comme cela ressemble, vous voulez enregistrer javascript état dans l'URL de sorte qu'il peut être mis en signet, sans rechargement de la page, ajouter à l'URL courante après un # et avoir un morceau de javascript déclenchée par l'événement onload analyser l'URL pour voir si elle contient de l'état enregistré.

Si vous utilisez un ? au lieu d'un #, vous devrez forcer un rechargement de la page, mais puisque vous va analyser l'état sauvegardé en charge ce ne peut être effectivement un problème; et cela rendra les boutons avant et arrière fonctionnent correctement.

21voto

Paul Dixon Points 122033

Je soupçonne fortement que ce n'est pas possible, parce que ce serait un sacré problème de sécurité si elle l'avait fait. Par exemple, je pourrais faire une page qui ressemblait à une banque de la page de login, et de faire de l'URL dans la barre d'adresse de regarder juste comme la vraie banque!

Peut-être que si vous expliquez pourquoi vous voulez le faire, les gens pourraient être en mesure de proposer d'autres approches...

[Modifier en 2011: Depuis que j'ai écrit cette réponse, en 2008, plus d'infos a venir à la lumière, au sujet d'un HTML5 technique qui permet l'URL à être modifié tant qu'il est de la même origine]

8voto

Jethro Larson Points 1125

Paramètres de sécurité du navigateur empêcher les gens de modifier l'affichage de l'url directement. Vous pouvez imaginer le phishing vulnérabilités qui en serait la cause.

Seul moyen fiable pour modifier l'url sans changer de pages est d'utiliser un lien interne ou de hachage. par exemple: http://site.com/page.html devient http://site.com/page.html#item1 . Cette technique est souvent utilisée dans hijax(AJAX + de préserver l'histoire).

Lorsque vous faites cela, je vais souvent l'utiliser juste des liens pour les actions avec le hash que le href, puis cliquez sur ajouter des événements avec jquery qui utilisent la demande de hachage afin de déterminer et délégué à l'action.

J'espère que vous met sur la bonne voie.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X