Wie entferne ich den Hash von window.location (URL) mit JavaScript ohne Seitenaktualisierung?

Lesezeit: 5 Minuten

Tom Lehmann

Ich habe eine URL wie: http://example.com#somethingwie entferne ich #somethingohne dass die Seite aktualisiert wird?

Folgende Lösung habe ich versucht:

window.location.hash="";

Das Hash-Symbol wird dadurch jedoch nicht entfernt # aus der URL.

Willst du das wirklich tun? Dies führt zu einer Seitenaktualisierung.

– seth

9. September 2009 um 3:08 Uhr
Kann man auf eine Seitenaktualisierung verzichten?

– Tom Lehmann

9. September 2009 um 3:11 Uhr
Es ist möglich. AJAX-Verlaufsbibliotheken befassen sich damit. Aber es ist nicht einfach und muss für fast jeden Browser anders gemacht werden. Nicht etwas, auf das Sie sich einlassen möchten.

– Gabriel Hurley

9. September 2009 um 3:14 Uhr
Gibt es Überlegungen, ein “#” außer einem visuellen zurückzulassen?

– Benutzer29660

16. August 2016 um 10:55 Uhr
Mögliches Duplikat von Ändern Sie die URL, ohne die Seite neu zu laden

– PayteR

10. September 2017 um 12:53 Uhr

Andi E

Die Lösung dieses Problems ist heutzutage viel greifbarer. Die HTML5-Verlaufs-API ermöglicht es uns, die Adressleiste so zu manipulieren, dass jede URL innerhalb der aktuellen Domain angezeigt wird.

function removeHash () { 
    history.pushState("", document.title, window.location.pathname
                                                       + window.location.search);
}

Arbeitsdemo: http://jsfiddle.net/AndyE/ycmPt/show/

Dies funktioniert in Chrome 9, Firefox 4, Safari 5, Opera 11.50 und in IE 10. Für nicht unterstützte Browser können Sie jederzeit ein elegant degradierendes Skript schreiben, das davon Gebrauch macht, sofern verfügbar:

function removeHash () { 
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Sie können also das Hash-Symbol loswerden, nur nicht in allen Browsern – noch nicht.

_{Hinweis: Wenn Sie die aktuelle Seite im Browserverlauf ersetzen möchten, verwenden Sie replaceState() anstatt pushState().}

Verwenden Sie diese Zeile, um sicherzustellen, dass Sie die Abfragezeichenfolge nicht verlieren: history.pushState(“”, document.title, window.location.pathname + window.location.search);

– Phil Kulak

13. März 2012 um 15:56 Uhr
@Phil: danke für den Hinweis, ich habe die Antwort entsprechend aktualisiert. Ich bin zu sehr daran gewöhnt, hübsche URLs zu verwenden.

– Andi E

13. März 2012 um 17:32 Uhr
Für ältere Versionen von IE müssen Sie anscheinend document.documentElement anstelle von document.body verwenden. Siehe diese Antwort stackoverflow.com/a/2717272/359048

– jasonmcclurg

14. August 2013 um 23:09 Uhr
Ich schlage vor, replaceState anstelle von pushState zu verwenden, um keinen zusätzlichen Eintrag im Browserverlauf zu erstellen.

– Nico

6. Oktober 2013 um 13:12 Uhr
@santiagoarizti: Du hast Recht, ich bin gerade zu dem gleichen Schluss gekommen. Ich habe den Code, den ich (vor 7 Jahren!) geschrieben habe, nicht richtig untersucht und übersehen, dass ich beim Entfernen des Hashs auch den Status der Schaltfläche umgeschaltet habe. Da Sie den Hash manuell ändern, könnten Sie das Ereignis immer selbst auslösen, nehme ich an.

– Andi E

23. Oktober 2018 um 15:30 Uhr

Gabriel Hurley

Erste Frage:

window.location.href.substr(0, window.location.href.indexOf('#'))

oder

window.location.href.split('#')[0]

Beide geben die URL ohne den Hash oder irgendetwas danach zurück.

Zu deiner Bearbeitung:

Jede Änderung an window.location löst eine Seitenaktualisierung aus. Du kannst ändern window.location.hash ohne die Aktualisierung auszulösen (obwohl das Fenster springt, wenn Ihr Hash mit einer ID auf der Seite übereinstimmt), aber Sie können das Hash-Zeichen nicht loswerden. Entscheiden Sie selbst, was schlimmer ist…

AKTUELLSTE ANTWORT

Die richtige Antwort darauf, wie man es macht, ohne Opfer zu machen (entweder vollständig neu laden oder das Hash-Zeichen dort lassen), ist hier unten. Belassen Sie diese Antwort jedoch hier in Bezug darauf, dass sie die ursprüngliche im Jahr 2009 war, während die richtige, die neue Browser-APIs nutzt, 1,5 Jahre später gegeben wurde.

Das ist einfach falsch, Sie können window.location.hash ändern und es wird keine Aktualisierung auslösen.

– Jewgenij

31. Oktober 2010 um 20:21 Uhr
@Evgeny – Das sagt meine Antwort. Ich sage ausdrücklich, dass das Ändern von window.location.hash keine Aktualisierung auslöst. “Sie können window.location.hash ändern, ohne die Aktualisierung auszulösen (obwohl das Fenster springt, wenn Ihr Hash mit einer ID auf der Seite übereinstimmt)”.

– Gabriel Hurley

31. Oktober 2010 um 22:29 Uhr
Kein Seitenneuladen – das ist in Frage. Dies ist nicht die Antwort, da es ein Neuladen der Seite erfordert / erzwingt!

– Ed_

28. Mai 2012 um 16:56 Uhr
denke auch, dass es nicht die ✓Antwort sein sollte

– abernier

19. Juni 2012 um 13:38 Uhr
Dies ist keine Antwort auf die OP-Frage.

– Brice

14. November 2013 um 23:42 Uhr

(Zu viele Antworten sind überflüssig und veraltet.) Die beste Lösung ist jetzt diese:

history.replaceState(null, null, ' ');

verwenden history.pushState(null, null, ' ') stattdessen, wenn Sie die Geschichte bewahren wollen.

– nichijou

5. Januar 2019 um 12:47 Uhr
Es könnte nützlich sein zu erklären, was passiert null für die state und title Parameter tut es schließlich.

– V. Rubinetti

1. Februar 2019 um 14:46 Uhr
Ein Problem mit diesem und dem Rest ist, dass es onhashchange nicht auslöst, obwohl der Hash jetzt leer ist, wenn er es vorher nicht war.

– Curtis

19. September 2019 um 21:46 Uhr
In TypeScript ist null für den zweiten Parameter nicht zulässig, da der Befehl eine Zeichenfolge akzeptiert. Mozilla empfiehlt leere Zeichenfolgen.

– Curtis

19. September 2019 um 22:00 Uhr
ist dieses Verhalten irgendwo dokumentiert? Wird es von allen Browsern/Versionen unterstützt?

– madd0

22. Februar 2021 um 11:56 Uhr

cprcrack

Einfach und elegant:

history.replaceState({}, document.title, ".");  // replace / with . to keep url

METALLKOPF

Sie können dies wie folgt tun:

history.replaceState({}, document.title, window.location.href.split('#')[0]);

Die mit einem Stern versehene Antwort hat in beiden Fällen für mich nicht funktioniert, aber diese hat es getan. Danke!

– Entw

29. April 2020 um 1:47 Uhr

Um den Hash zu entfernen, können Sie versuchen, diese Funktion zu verwenden

function remove_hash_from_url()
{
    var uri = window.location.toString();
    if (uri.indexOf("#") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("#"));
        window.history.replaceState({}, document.title, clean_uri);
    }
}

Die mit einem Stern versehene Antwort hat in beiden Fällen für mich nicht funktioniert, aber diese hat es getan. Danke!

– Entw

29. April 2020 um 1:47 Uhr

Chris Gunawardena

Dadurch wird auch der nachgestellte Hash entfernt. z.B: http://test.com/123#abc -> http://test.com/123

if(window.history.pushState) {
    window.history.pushState('', "https://stackoverflow.com/", window.location.pathname)
} else {
    window.location.hash="";
}

Dadurch werden alle in der URL vorhandenen Abfrageparameter entfernt 🙁

– kevgathuku

2. August 2018 um 11:53 Uhr
@kevgathuku Sie können sie mit location.search wieder hinzufügen, zB: ` window.history.pushState(”, ‘/’, window.location.pathname + window.location.search)`

– Chris Gunawardena

2. August 2018 um 12:04 Uhr

9427000cookie-checkWie entferne ich den Hash von window.location (URL) mit JavaScript ohne Seitenaktualisierung?

#Fragment-Identifikator #Javascript #window.location