web-dev-qa-db-fra.com

Existe-t-il un moyen de modifier la barre d'adresse du navigateur sans rafraîchir la page?

Je développe une application web. J'y ai une section appelée catégories qui, chaque fois qu'un utilisateur clique sur l'une des catégories, un panneau de mise à jour charge le contenu approprié.

Une fois que l'utilisateur a cliqué sur la catégorie, je souhaite modifier l'URL de la barre d'adresse du navigateur

www.mysite.com/products

à quelque chose comme

www.mysite.com/products/{selectedCat}

sans rafraîchir la page.
Existe-t-il une sorte d'API JavaScript que je peux utiliser pour y parvenir?

urladdress-bar
91
hashem

Avec HTML5, vous pouvez modifier l'url sans recharger:

Si vous souhaitez créer un nouveau message dans l'historique du navigateur (c'est-à-dire que le bouton de retour fonctionnera)

window.history.pushState('Object', 'Title', '/new-url');

Si vous souhaitez simplement modifier l'URL sans pouvoir revenir en arrière

window.history.replaceState('Object', 'Title', '/another-new-url');

L'objet peut être utilisé pour la navigation ajax:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

En savoir plus ici: http://www.w3.org/TR/html5-author/history.html

Une solution de secours: https://github.com/browserstate/history.js

153
Alfred

Pour ajouter à ce que les gars ont déjà dit, modifiez la propriété window.location.hash pour qu'elle corresponde à l'URL que vous souhaitez dans votre fonction onclick.

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
31
roborourke

Je crois que la manipulation directe de la barre d'adresse vers une URL complètement différente sans passer à cette URL n'est pas autorisée pour des raisons de sécurité, si vous en êtes satisfait

www.mysite.com/products/#{selectedCat}

c'est-à-dire un lien de style ancre dans la même page, puis examinez les divers scripts d'historique/"bouton de retour" qui sont maintenant présents dans la plupart des bibliothèques javascript.

La mention du panneau de mise à jour m'amène à supposer que vous utilisez asp.net, dans ce cas, le contrôle de l'historique ajax asp.net est un bon point de départ

7
Justin Wignall

Je ne pense pas que cela soit possible (au moins changer pour une adresse totalement différente), car ce serait une mauvaise utilisation non intuitive de la barre d'adresse, et pourrait promouvoir des attaques de phishing.

3
Galwegian