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


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

Cependant, je ne trouve pas l'article I pense J'ai lu.

Suis-je fou ou existe-t-il un moyen de le faire (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.


518
2017-07-26 20:18


origine


Réponses:


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

Voici l'article original que j'ai lu (publié le 10 juillet 2010): HTML5: modification de l'URL du navigateur sans actualiser la page.

Pour un examen plus approfondi de pushState / replaceState / popstate (alias HTML5 History API) voir les documents MDN.

TL; DR, vous pouvez faire ceci:

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

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


739
2017-07-27 01:34



Changer seulement ce qui est après hachage - vieux navigateurs

document.location.hash = 'lookAtMeNow';

Modification de l'URL complète Chrome, Firefox, IE10 +

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

Ce qui précède va ajouter une nouvelle entrée à l'histoire afin que vous puissiez appuyer sur le bouton Retour pour passer à l'état précédent. Pour changer l'URL en place sans ajouter une nouvelle entrée à l'historique

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

Essayez de les lancer dans la console maintenant!


104
2017-09-01 16:35



Mise à jour de la réponse de David pour détecter même les navigateurs ne supporte pas pushstate:

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

9
2017-07-04 11:01