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

Question

Je suis en train de développer une application web. Dans celle-ci, j'ai une section appelée catégories qui, chaque fois qu'un utilisateur clique sur une des catégories, un panneau de mise à jour charge le contenu approprié.

Après que l'utilisateur a cliqué sur la catégorie, je veux changer l'url de la barre d'adresse du navigateur de "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 ?

Answer 1

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

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

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

Si vous voulez juste changer 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);
};

Plus d'informations ici : http://www.w3.org/TR/html5-author/history.html

Une solution de repli : http://github.com/fortes/history.js/

Answer 2

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 voulez dans votre fonction onclick.

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

Answer 3

Je crois que la manipulation directe de la barre d'adresse vers une url complètement différente sans se déplacer vers cette url n'est pas autorisée pour des raisons de sécurité, si vous êtes heureux de l'être.

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

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

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

Answer 4

Je ne pense pas que cela soit possible (au moins en changeant d'adresse), car cela constituerait une mauvaise utilisation de la barre d'adresse, et pourrait favoriser les attaques de phishing.

Answer 5

"window.location.hash"

comme suggéré par sanchothefat devrait être la seule et unique façon de faire. Parce que partout où j'ai vu cette fonctionnalité, c'est tout le temps après le # dans l'URL.