web-dev-qa-db-fra.com

Mise à jour de la barre d'adresse avec la nouvelle URL sans hachage ni rechargement de la page

J'ai soit rêvé de chrome (canal de dev) implémenter un moyen de mettre à jour la barre d'adresse via javascript (le chemin, pas le domaine) sans recharger la page, soit ils l'ont vraiment fait.

Cependant, je ne trouve pas l'article que j'ai lu , que je lis .

Suis-je fou ou y at-il un moyen de faire cela (dans Chrome)?

p.s. Je ne parle pas de window.location.hash, et al. Si ce qui précède existe la réponse à cette question sera faux.

javascriptajaxgoogle-chrome
598
David Murdoch

Vous pouvez maintenant le faire dans la plupart des navigateurs "modernes"!

Voici l'article original que j'ai lu (posté le 10 juillet 2010): HTML5: Changer l'URL du navigateur sans rafraîchir la page .

Pour un examen plus approfondi de pushState/replaceState/popstate (autrement dit l’API de l’historique HTML5) voir la documentation MDN .

TL; DR, vous pouvez faire ceci:

window.history.pushState("object or string", "Title", "/new-url");

Voir ma réponse à Modifiez l'URL sans recharger la page pour un tutoriel de base.

825
David Murdoch

Changer seulement ce qui est après hash - anciens navigateurs

document.location.hash = 'lookAtMeNow';

Changer l'URL complète. Chrome, Firefox, IE10 +

history.pushState('data to be passed', 'Title of the page', '/test');

Ce qui précède ajoute une nouvelle entrée à l’historique afin que vous puissiez appuyer sur le bouton Précédent pour revenir à l’état précédent. Pour modifier l'URL en place sans ajouter une nouvelle entrée à l'historique, utilisez

history.replaceState('data to be passed', 'Title of the page', '/test');

Essayez de les exécuter dans la console maintenant!

138
Pawel

Mettre à jour vers Davids répond même pour détecter les navigateurs qui ne supportent pas pushstate:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}
27
metamagikum