wake-up-neo.com

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

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

Ich habe folgende Lösung versucht:

window.location.hash = '';

Dies entfernt jedoch nicht das Hash-Symbol # von der URL.

302
Tom Lehman

Ausgangsfrage:

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 deine 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 entfernen. Treffen Sie Ihre Wahl, für die es schlimmer ist ...

AKTUELLE ANTWORT

Die richtige Antwort, wie man es macht, ohne zu opfern (entweder vollständiges Nachladen oder das Hash-Zeichen dort zu lassen), ist hier unten . Diese Antwort hier zu lassen, bezog sich jedoch auf die ursprüngliche im Jahr 2009, wohingegen die richtige, die neue Browser-APIs nutzt, 1,5 Jahre später gegeben wurde.

191
Gabriel Hurley

Die Lösung dieses Problems ist heutzutage weitaus leichter zu erreichen. Mit der HTML5 History API können wir die Adressleiste so ändern, dass eine beliebige URL in 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 immer ein elegantes, herabsetzendes 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;
    }
}

Sie können also 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().

545
Andy E

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

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

Einfach und elegant:

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

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

Dadurch wird auch der abschließende Hash entfernt. zB: http://test.com/123#abc -> http://test.com/12

if(window.history.pushState) {
    window.history.pushState('', '/', window.location.pathname)
} else {
    window.location.hash = '';
}
12

Wie wäre es mit den folgenden?

window.location.hash=' '

Bitte beachten Sie, dass der Hash auf ein einzelnes Leerzeichen und nicht auf eine leere Zeichenfolge gesetzt wird.


Das Setzen des Hash auf einen ungültigen Anker bewirkt ebenfalls keine Aktualisierung. Sowie,

window.location.hash='invalidtag'

Aber obige Lösung halte ich für irreführend. Dies scheint darauf hinzudeuten, dass an der angegebenen Position ein Anker mit dem angegebenen Namen vorhanden ist, obwohl es keinen gibt. Gleichzeitig wird durch die Verwendung einer leeren Zeichenfolge die Seite nach oben verschoben, was manchmal inakzeptabel sein kann. Durch die Verwendung eines Leerzeichens wird außerdem sichergestellt, dass die Seite bei jedem Kopieren und erneuten Besuch der URL mit einem Lesezeichen versehen und in der Regel oben angezeigt wird 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.

5
Nibras Reeza
const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);
5
Casey

Sie können es wie folgt tun:

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

4
METALHEAD
<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>

tragen Sie diesen Code in den Kopfbereich ein

Versuche Folgendes:

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

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

Die magische Lösung wird erklärt hier . Specs 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 von WhatWG HTML Living Standard

0
voscausa