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

331

Ich habe eine URL wie: http://example.com#somethingWie kann ich entfernen #something, ohne dass die Seite aktualisiert wird?

Ich habe folgende Lösung versucht:

window.location.hash = '';

Dadurch wird das Hash-Symbol jedoch nicht #aus der URL entfernt.

Tom Lehman
quelle
3
Willst du das wirklich tun? Es wird eine Seitenaktualisierung verursacht.
Seth
9
Kann auf eine Seitenaktualisierung verzichtet werden?
Tom Lehman
1
Es ist möglich. AJAX-Geschichtsbibliotheken befassen sich damit. Aber es ist nicht einfach und muss für fast jeden Browser anders gemacht werden. Nicht etwas, worauf du dich einlassen willst.
Gabriel Hurley
Gibt es irgendwelche Überlegungen, ein "#" anders als ein visuelles zurückzulassen?
user29660
Mögliches Duplikat von Ändern Sie die URL, ohne die Seite neu zu
laden

Antworten:

210

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.

In Bezug auf Ihre Bearbeitung:

Jede Änderung an window.locationlöst eine Seitenaktualisierung aus. Sie können Änderungen window.location.hashvornehmen, 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 entfernen. Treffen Sie Ihre Wahl, für die es schlimmer ist ...

AKTUELLE ANTWORT

Die richtige Antwort, wie man es ohne Opfer macht (entweder volles Nachladen oder das Hash-Zeichen dort lassen), ist hier unten . Diese Antwort hier zu belassen, obwohl sie 2009 die ursprüngliche war, während die richtige, die neue Browser-APIs nutzt, 1,5 Jahre später gegeben wurde.

Gabriel Hurley
quelle
22
Dies ist einfach falsch. Sie können window.location.hash ändern und es wird keine Aktualisierung ausgelöst.
Evgeny
61
@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
3
Kein erneutes Laden der Seite - das ist die Frage. Dies ist nicht die Antwort, da ein erneutes Laden der Seite erforderlich ist / erzwungen wird!
Ed_
10
denke auch, es sollte nicht die Antwort sein
abernier
4
Dies ist keine Antwort auf die OP-Frage.
Bryce
585

Die Lösung dieses Problems ist heutzutage viel greifbarer. Mit der HTML5-Verlaufs-API können wir die Standortleiste so bearbeiten, dass jede URL in der aktuellen Domäne 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 ordnungsgemäß herabwürdigendes Skript schreiben, das es verwendet, 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;
    }
}

So können Sie das Hash-Symbol entfernen, nur noch nicht in allen Browsern.

Hinweis: Wenn Sie die aktuelle Seite im Browserverlauf ersetzen möchten, verwenden Sie replaceState()anstelle von pushState().

Andy E.
quelle
9
Verwenden Sie diese Zeile, um sicherzustellen, dass Sie die Abfragezeichenfolge nicht verlieren: history.pushState ("", document.title, window.location.pathname + window.location.search);
Phil Kulak
6
@Phil: Danke für den Hinweis, ich habe die Antwort entsprechend aktualisiert. Ich bin es zu gewohnt, hübsche URLs zu verwenden.
Andy E
1
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
29
Ich schlage vor, replaceState anstelle von pushState zu verwenden, um keinen zusätzlichen Eintrag im Browserverlauf zu erstellen.
Nico
1
@ 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 überprüft und festgestellt, dass ich beim Entfernen des Hashs auch den Status der Schaltfläche umgeschaltet habe. Da Sie den Hash manuell ändern, können Sie das Ereignis vermutlich immer selbst auslösen.
Andy E
85

(Zu viele Antworten sind redundant und veraltet.) Die beste Lösung ist jetzt:

history.replaceState(null, null, ' ');
Pacerier
quelle
5
Verwenden Sie history.pushState(null, null, ' ')stattdessen, wenn Sie den Verlauf beibehalten möchten.
Nichijou
9
Es kann nützlich sein zu erklären, was das Übergeben nullder Parameter stateund titleletztendlich bewirkt.
V. Rubinetti
Ein Problem mit diesem und dem Rest ist, dass es keinen Onhashchange auslöst, obwohl der Hash jetzt leer ist, als er vorher nicht war.
Curtis
1
In TypeScript ist null für den zweiten Parameter nicht zulässig, da der Befehl eine Zeichenfolge akzeptiert. Mozilla empfiehlt eine leere Zeichenfolge.
Curtis
41

Einfach und elegant:

history.replaceState({}, document.title, ".");  // replace / with . to keep url
cprcrack
quelle
3
Verwenden Sie einen Punkt anstelle eines Schrägstrichs, wenn Sie im selben Verzeichnis bleiben möchten
vahanpwns
1
Bitte aktualisieren Sie die Antwort bezüglich @vahanpwns Hinweis, um sie .anstelle von zu verwenden /. Mit /ändert sich die URL zum Stammpfad.
Isaac Gregson
5
Vielen Dank für diese Antwort, die ich history.replaceState({}, document.title, location.href.substr(0, location.href.length-location.hash.length));für meinen Anwendungsfall geändert habe.
Scott Jungwirth
5
Dadurch wird die URL-Abfrage nicht beibehalten.
Vladislav Kostenko
2
Mein Anwendungsfall war auch zu ersetzen statt zu schieben, aber das macht für mich mehr Sinn:history.replaceState(null, document.title, location.pathname + location.search);
MDMower
16

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);
    }
}
Rahul Gupta
quelle
13

Dadurch wird auch der nachfolgende Hash entfernt. Beispiel: http://test.com/123#abc -> http://test.com/123

if(window.history.pushState) {
    window.history.pushState('', '/', window.location.pathname)
} else {
    window.location.hash = '';
}
Chris Gunawardena
quelle
Dies entfernt alle Abfrageparameter, die in der URL vorhanden sind :(
kevgathuku
1
@kevgathuku können Sie sie mit location.search wieder hinzufügen, zB: `window.history.pushState ('', '/', window.location.pathname + window.location.search)`
Chris Gunawardena
6

Wie wäre es mit folgendem?

window.location.hash=' '

Bitte beachten Sie, dass ich den Hash auf ein einzelnes Leerzeichen und nicht auf eine leere Zeichenfolge setze.


Das Setzen des Hashs auf einen ungültigen Anker führt ebenfalls nicht zu einer Aktualisierung. Sowie,

window.location.hash='invalidtag'

Aber ich finde die obige Lösung irreführend. Dies scheint darauf hinzudeuten, dass sich an der angegebenen Position ein Anker mit dem angegebenen Namen befindet, obwohl es keinen gibt. Gleichzeitig führt die Verwendung einer leeren Zeichenfolge dazu, dass die Seite nach oben verschoben wird, was manchmal nicht akzeptabel sein kann. Durch die Verwendung eines Leerzeichens wird außerdem sichergestellt, dass sich die Seite bei jedem Kopieren, Lesezeichen und erneuten Besuch der URL normalerweise oben befindet und das Leerzeichen ignoriert wird.

Und hey, das ist meine erste Antwort auf StackOverflow. Hoffe, jemand findet es nützlich und es entspricht den Community-Standards.

Nibras Reeza
quelle
7
Wenn Sie Hash auf Whitespace setzen, bleibt das # am Ende der URL erhalten. Ich denke, das Ziel ist es, es vollständig zu entfernen.
Mahemoff
1
Es folgt ein Hash am Ende der URL. Die Frage ist, wie man das entfernt.
Gurmeet Singh
Ja, wie können wir # auch mit einem Hash-String entfernen?
Bhavin Thummar
6

Sie können es wie folgt tun:

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

METALLKOPF
quelle
1
Die Antwort mit den Sternen hat in beiden Fällen bei mir nicht funktioniert, aber diese hat funktioniert. Vielen Dank!
Dev
5
const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);
Casey
quelle
2
Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
Rollstuhlfahrer
3
<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
    var clean_uri = uri.substring(0, uri.indexOf("?"));
    window.history.replaceState({}, document.title, clean_uri);
}
</script>

Setzen Sie diesen Code auf den Kopfabschnitt

Manigandan Raamanathan
quelle
3
function removeLocationHash(){
    var noHashURL = window.location.href.replace(/#.*$/, '');
    window.history.replaceState('', document.title, noHashURL) 
}

window.addEventListener("load", function(){
    removeLocationHash();
});
Vimal Kumar
quelle
2

Ich denke, es wäre sicherer

if (window.history) {
    window.history.pushState('', document.title, window.location.href.replace(window.location.hash, ''));
} else {
    window.location.hash = '';
}
Konstantin Lekh
quelle
0

Versuche Folgendes:

window.history.back(1);
Vishal Sharma
quelle
23
Dies beantwortet die Frage nicht, wenn der Benutzer direkt zur URL einschließlich des Hashs gelangt ist.
Nickb
Dieser Trick ist sehr nützlich, wenn Sie nur einen Link zur vorherigen Seite erstellen möchten, der Link jedoch in einer Reihe von JS-Dateien versteckt ist.
ValidfroM
Genau das, wonach ich gesucht habe. Dies funktioniert perfekt, um einen Hashtag zu entfernen, der gerade von meiner Web-App erstellt wurde, um einen Wert zu verbrauchen, der von einer Javasript-Funktion zurückgegeben wird.
user278859
0

Hier ist eine andere Lösung, um den Speicherort mit href zu ändern und den Hash zu löschen, ohne zu scrollen.

Die magische Lösung wird hier erklärt . Technische Daten hier .

const hash = window.location.hash;
history.scrollRestoration = 'manual';
window.location.href = hash;    
history.pushState('', document.title, window.location.pathname);

HINWEIS: Die vorgeschlagene API ist jetzt Teil des WhatWG HTML Living Standard

Voscausa
quelle
0
  $(window).on('hashchange', function (e) {
        history.replaceState("", document.title, e.originalEvent.oldURL);
    });
JohnMathew
quelle
-1

Sie können Hash durch null ersetzen

var urlWithoutHash = document.location.href.replace(location.hash , "" );
Devang Bhagdev
quelle
1
Die Frage lautet "ohne dass die Seite aktualisiert wird", aber diese Methode aktualisiert die Seite. Sie sollten diese Tatsache in Ihrer Antwort beachten, damit wir nicht alle unsere Zeit damit verschwenden müssen, aus erster Hand herauszufinden, dass Sie eine andere Frage beantworten als die, die wir hier tatsächlich beantworten möchten.
Vladimir Kornea
Die Seite wird nicht aktualisiert.
Ciprian