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

91

Je développe une application Web. Dans celui-ci, j'ai une section appelée catégories que 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 actualiser la page.
Existe-t-il une sorte d'API JavaScript que je peux utiliser pour y parvenir?

url address-bar

— Luiso
source

157

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

Si vous souhaitez créer un nouveau message dans l'historique du navigateur (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

— Alfred
source

4

+1 Notez également; ceux-ci modifient le pathet / ou query stringdans l'URL; ils ne peuvent pas changer le protocole, le domaine ou le port (car ce serait un problème de sécurité comme d'autres l'ont souligné). La hashfonction ci-dessus peut changer l'ancre (ou l'identifiant du fragment)

— Chris S

2

en disant simplement, dans votre exemple '/ item / 35'}, il y a un supplément} ajouté

— Zhanger

En guise de question secondaire, existe-t-il un moyen de permettre à ces URL d'être ensuite indexées dans Google?

— Peter Featherstone

1

Une meilleure bibliothèque semble être github.com/browserstate/history.js, elle est activement maintenue et largement utilisée alors que fortes- history.js est restée inactive pendant 3 ans.

— Gonfi den Tschal

2

Veuillez noter que Firefox ne prend pas en charge le titre, utilisez donc document.title = "nouveau titre".

— 0fnt le

31

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

— Roborourke
source

existe-t-il un moyen de modifier l'URL sans le symbole «#» dans l'URL?

— SHEKHAR SHETE

7

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

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

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

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

— Justin Wignall
source

3

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 favoriser les attaques de phishing.

— Galvégien
source

Plutôt que d'être peu intuitif, je pense que vous ne devriez pas pouvoir le faire car cela pourrait être utilisé à mauvais escient pour des attaques de phishing. Quoi qu'il en soit, c'est +1.

— OregonGhost

Oui, cela m'est venu à l'esprit. Pas une bonne idée. Merci OregonGhost.

— Galwegian

1

Je pense que c'est possible ... Consultez Wikimapia ... Lorsque vous faites glisser la carte, l'URL est modifiée ...

— Shivasubramanian A

@ Shivasubramanian-a: J'ai regardé Wikimapia, et en effet, ils utilisent juste la technique suggérée par somej et décrite par sanchothefat: il suffit de changer le nom de l'ancre. Qui est sûr contre le phishing ...

— PhiLho

-1

Cela ne peut pas être fait comme vous le dites. La méthode suggérée par somej.net est la plus proche que vous puissiez obtenir. C'est en fait une pratique très courante à l'ère AJAX. Même Gmail l'utilise.

— aalaap
source

-1

"window.location.hash"

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