Aktualisierung der Adressleiste mit der neuen URL ohne Raute oder Neuladen der Seite

Question

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

Ich kann jedoch den Artikel nicht finden, den ich denken Ich habe gelesen.

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

p.s. Ich spreche nicht von window.location.hash usw. Wenn die obige Datei existiert die Antwort auf diese Frage unwahr sein wird.

Answer 1

Dies ist jetzt in den meisten "modernen" Browsern möglich!

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

Für einen tieferen Einblick in pushState/replaceState/popstate (auch bekannt als die HTML5 History API) siehe die MDN-Dokumente .

TL;DR, Sie können dies tun:

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

Siehe meine Antwort auf Ändern Sie die URL, ohne die Seite neu zu laden. für eine grundlegende Anleitung.

Answer 2

Nur das ändern, was nach der Raute kommt - alte Browser

document.location.hash = 'lookAtMeNow';

Ändern der vollständigen URL. Chrome, Firefox, IE10+

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

Dadurch wird ein neuer Eintrag in den Verlauf eingefügt, und Sie können mit der Taste Zurück zum vorherigen Zustand zurückkehren. Um die URL an Ort und Stelle 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 jetzt, diese in der Konsole auszuführen!

Answer 3

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

if (history.pushState) {
  window.history.pushState(stateObj, "title", "url");
} else {
  window.history.replaceState(stateObj, "title**", 'url');
  // ** It seems that current browsers other than Safari don't support pushState
  // title attribute. We can achieve the same thing by setting it in JS.
  document.title = "Title";
}

stateObj

Das state-Objekt ist ein JavaScript-Objekt, das mit dem an die replaceState-Methode übergebenen Verlaufseintrag verknüpft ist. Das state-Objekt kann null sein.

Titel

Die meisten Browser ignorieren diesen Parameter derzeit, obwohl sie ihn möglicherweise in Zukunft verwenden werden. Die Übergabe der leeren Zeichenkette hier sollte vor zukünftigen Änderungen an der Methode sicher sein. Alternativ können Sie auch einen kurzen Titel für den Status übergeben.

url Optional

Die URL des Historieneintrags. Die neue URL muss denselben Ursprung haben wie die aktuelle URL; andernfalls löst replaceState eine Ausnahme aus.

Answer 4

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