Aktualisieren der Adressleiste mit neuer URL ohne Hash oder erneutes Laden der Seite

642

Ich habe entweder davon geträumt, dass Chrome (Dev Channel) eine Möglichkeit implementiert, die Adressleiste über Javascript (den Pfad, nicht die Domain) zu aktualisieren, ohne die Seite neu zu laden, oder sie haben dies wirklich getan.

Ich kann den Artikel , den ich zu lesen glaube , jedoch nicht finden .

Bin ich verrückt oder gibt es eine Möglichkeit, dies zu tun (in Chrome)?

ps Ich spreche nicht von window.location.hash et al. Wenn das oben Gesagte existiert, ist die Antwort auf diese Frage falsch.

javascript ajax google-chrome David Murdoch
quelle
3
Mögliches Duplikat von URL ändern, ohne die Seite neu zu
laden
1
@tobiaskienzler Als diese Frage ursprünglich im Jahr 2009 gestellt wurde, war dies nicht möglich.
David Murdoch
3
Natürlich nicht. Aber jetzt ist es so, dass die Fragen dasselbe verlangen. Schade, dass der andere eine veraltete Antwort akzeptiert hat (von Ihnen, wie ich bemerkt habe) ... Weißt du was? Lassen Sie uns umgekehrt täuschen - niemand sagte, das "Original" müsse das ältere sein, tatsächlich gibt es Präzedenzfälle
Tobias Kienzler
@tobiaskienzler, die andere Frage hat keine veraltete akzeptierte Antwort.
David Murdoch
2
@TobiasKienzler es ist eine 6 Jahre alte Frage, warum musst du dich mit dieser Frage beschäftigen? Genießen Sie einfach die erstaunliche Antwort und implementieren Sie sie in Ihre Anwendung. Seit 6 Jahren waren sich Tausende von SO-Benutzern einig, dass es eine erstaunliche Frage ist. Bitte lassen Sie es so, wie es ist.
Imam Assidiqqi

Antworten:

874

Sie können dies jetzt in den meisten "modernen" Browsern tun!

Hier ist der Originalartikel, den ich gelesen habe (veröffentlicht am 10. Juli 2010): HTML5: Ändern der Browser-URL ohne Aktualisierung der Seite .

Weitere Informationen zu pushState / replaceState / popstate (auch bekannt als HTML5-Verlaufs-API) finden Sie in den MDN-Dokumenten .

TL; DR, Sie können dies tun:

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

Eine grundlegende Anleitung finden Sie in meiner Antwort zum Ändern der URL, ohne die Seite neu zu laden .

David Murdoch
quelle
3
Ah, die Funktionalität ist in WebKit und vor einigen Monaten gelandet < bugs.webkit.org/show_bug.cgi?id=36152 >. Schöner Fund!
ältester lebender Junge
6
Dies wird jetzt von Github verwendet, während Baumnavigation
Valerij
1
@ Vprimachenko: Ja. Und sie brechen ab und zu meinen Zurück-Knopf.
David Murdoch
Dies ist jetzt in Chrome, Safari, FF4 + und IE10pp3 + möglich! (Aus David Murdochs Antwort auf stackoverflow.com/questions/824349/… )
Zach Lysobey
11
Protip: Sie können mit diesen Funktionen auch relative Pfade verwenden (z . B. ../new-urloder ../../new-url. Sie scheinen zumindest das zu tun, was Sie in Chrome erwarten würden.
Mahn
156

Ändern nur, was nach Hash - alten Browsern

document.location.hash = 'lookAtMeNow';

Vollständige URL ändern. Chrome, Firefox, IE10 +

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

Oben wird ein neuer Eintrag zum Verlauf hinzugefügt, sodass Sie die Zurück-Taste drücken können, um zum vorherigen Status zurückzukehren. Um die URL zu ändern, ohne einen neuen Eintrag zum Verlauf hinzuzufügen, verwenden Sie

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

Versuchen Sie, diese jetzt in der Konsole auszuführen!

Pawel
quelle
13
replaceStatewar genau das, was ich brauchte, danke für die Erweiterung der ursprünglichen Antwort.
Choylton B. Higginbottom
"Die Domain und das Protokoll müssen mit dem Original identisch sein!" Dies verhindert, dass ein Angelplatz die URL der Adressleiste ändert.
Rick
3
Sie sollten dieser Funktion keine absolute URL übergeben. Wenn Sie dies tun, müssen Sie es höchstwahrscheinlich dynamisch aus dem aktuellen Schema, Host und Port erstellen. Dies ist eine Menge Arbeit, wenn Sie es einfach zu einer relativen URL machen könnten ("foo.html" oder sogar "/foo.html" ") und lassen Sie den Browser sich darum kümmern.
DimeCadmium
1
@DimeCadmium schöne Vereinfachung. Aktualisiert.
Pawel
history.replaceStatezur Geschichte hinzufügen in ff 66.0b1
azzamsa
33

Update auf Davids Antwort, um sogar Browser zu erkennen, die Pushstate nicht unterstützen:

if (history.pushState) {
  window.history.pushState("object or string", "Title", "/new-url");
} else {
  document.location.href = "/new-url";
}
Metamagikum
quelle
9
document.location.href lädt die Seite neu
paullb
1 
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?foo=bar';
window.history.pushState({path:newurl},'',newurl);
Kevin Mendez
quelle
3
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
MaxiMouse
@ MaxiMouse danke für deinen Vorschlag, ich werde es berücksichtigen.
Kevin Mendez