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

646

J'ai 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 que je pense avoir lu.

Suis-je fou ou existe-t-il un moyen de le faire (dans Chrome)?

ps je ne parle pas de window.location.hash, et al. Si ce qui précède existe, la réponse à cette question sera fausse.

javascript ajax google-chrome

— David Murdoch
source

3

Copie possible de Modifier l'URL sans recharger la page

— Tobias Kienzler

1

@tobiaskienzler Lorsque cette question a été posée à l'origine en 2009, ce n'était pas possible.

— David Murdoch

3

Bien sûr que non. Mais maintenant c'est le cas, les questions demandent la même chose. Dommage cependant que l'autre ait une réponse dépassée acceptée (par toi, j'ai remarqué) ... Tu sais quoi? Faisons dupe-close dans l'autre sens, personne n'a dit que "l'original" devait être le plus ancien, en fait il y a des précédents

— Tobias Kienzler

@tobiaskienzler, l'autre question n'a pas de réponse acceptée périmée.

— David Murdoch

2

@TobiasKienzler c'est une question vieille de 6 ans, pourquoi faut-il s'embêter avec cette question? Profitez simplement de la réponse étonnante et implémentez-la sur votre application. Pendant 6 ans, des milliers d'utilisateurs de SO ont convenu que c'était une question incroyable, veuillez la laisser telle quelle.

— Imam Assidiqqi

876

Vous pouvez désormais 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 rafraîchissement de la page .

Pour une analyse plus approfondie de pushState / replaceState / popstate (alias l'API HTML5 History), consultez les documents MDN .

TL; DR, vous pouvez le faire:

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.

— David Murdoch
source

3

Ah, la fonctionnalité est dans WebKit et a atterri il y a quelques mois < bugs.webkit.org/show_bug.cgi?id=36152 >. Belle trouvaille!

— vieuxlivingboy

6

ceci est maintenant utilisé par github, tandis que la navigation dans les arbres

— Valerij

1

@Vprimachenko: Yup. Et ils cassent mon bouton de retour de temps en temps.

— David Murdoch

Cela peut maintenant être fait dans Chrome, Safari, FF4 + et IE10pp3 +! (De la réponse de David Murdoch à stackoverflow.com/questions/824349/… )

— Zach Lysobey

11

Protip: vous pouvez également utiliser des chemins relatifs avec ces fonctions (par exemple ../new-urlou ../../new-url. Ils semblent faire ce que vous attendez au moins dans Chrome.

— Mahn

157

Changer uniquement ce qui est après le hachage - anciens 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 ajoutera une nouvelle entrée à l'historique afin que vous puissiez appuyer sur le bouton Retour 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!

— Pawel
source

13

replaceStateétait exactement ce dont j'avais besoin, merci d'avoir développé la réponse originale.

— Choylton B. Higginbottom

"le domaine et le protocole doivent être les mêmes que ceux d'origine!" cela empêche certains sites de pêche de modifier l'URL de la barre d'adresse.

— Rick

3

Vous ne devez pas transmettre une URL absolue à cette fonction. Si vous le faites, vous devrez probablement le construire dynamiquement à partir du schéma, de l'hôte et du port actuels - ce qui représente beaucoup de travail lorsque vous pouvez simplement en faire une URL relative ("foo.html" ou même "/foo.html ") et laissez le navigateur s'en occuper.

— DimeCadmium

1

@DimeCadmium belle simplification. Mise à jour.

— Pawel

history.replaceStateajouter à l'histoire dans ff 66.0b1

— azzamsa

33

Mettez à jour la réponse de Davids pour même détecter les navigateurs qui ne prennent pas en charge pushstate:

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

— metamagikum
source

9

document.location.href recharge la page

— paullb

1

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);

— Kevin Mendez
source

4

Bien que cet extrait de code puisse résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondrez à la question des lecteurs à l'avenir et que ces personnes ne connaissent peut-être pas les raisons de votre suggestion de code.

— MaxiMouse

@MaxiMouse merci pour votre sugerence, je vais en tenir compte.

— Kevin Mendez