webentwicklung-frage-antwort-db.com.de

Entfernen Sie das Fragment in der URL, ohne dass JavaScript das Neuladen der Seite verursacht

Hintergrund: Ich habe eine HTML-Seite, mit der Sie bestimmte Inhalte erweitern können. Da für eine solche Erweiterung nur kleine Teile der Seite geladen werden müssen, erfolgt dies über JavaScript und nicht durch Weiterleiten an eine neue URL/HTML-Seite. Als Bonus ist der Benutzer jedoch in der Lage, einen Permalink zu solchen erweiterten Abschnitten zu erstellen, d. H. Jemand anderem eine URL wie diese zu senden

http://example.com/#foobar

und lassen Sie die Kategorie "foobar" sofort für diesen anderen Benutzer öffnen. Dies funktioniert mit parent.location.hash = 'foobar', so dass dieser Teil in Ordnung ist.

Nun die Frage: Wenn der Benutzer eine solche Kategorie auf der Seite schließt, möchte ich das URL-Fragment wieder leeren, dh http://example.com/#foobar in http verwandeln : //example.com/ um die Permalink-Anzeige zu aktualisieren. Wenn Sie jedoch parent.location.hash = '' verwenden, wird die gesamte Seite neu geladen (z. B. in Firefox 3), was ich vermeiden möchte. Die Verwendung von window.location.href = '/#' löst kein erneutes Laden der Seite aus, hinterlässt jedoch das etwas unscheinbare "#" Zeichen in der URL. Gibt es in gängigen Browsern eine Möglichkeit, einen URL-Anker mit dem Zeichen "#" durch JavaScript zu entfernen, ohne eine Seitenaktualisierung auszulösen?

40
Philipp Lenssen

Wie bereits erwähnt, kann replaceState in HTML5 verwendet werden, um das URL-Fragment zu entfernen.

Hier ist ein Beispiel:

// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");

// slice off the remaining '#' in HTML5:    
if (typeof window.history.replaceState == 'function') {
  history.replaceState({}, '', window.location.href.slice(0, -1));
}
46
Matmas

Da Sie die Aktion für den Hashwert steuern, verwenden Sie einfach ein Token, das "nichts" bedeutet, wie "#_" oder "#default".

Tut mir leid zu sagen, aber die Antwort ist nein, wenn das Leeren von location.hash die Aufgabe nicht erfüllt! -)

7
roenving

Sie können die glänzenden neuen HTML5-Methoden window.history.pushState und replaceState verwenden, wie in ASCIIcasts 246: AJAX History State und im GitHub-Blog beschrieben. Auf diese Weise können Sie den gesamten Pfad (innerhalb desselben Origin-Hosts) und nicht nur das Fragment ändern. Um diese Funktion auszuprobieren, durchsuchen Sie ein GitHub-Repository mit einem aktuellen Browser.

4
Chris Boyle

Anstelle von Hash gibt es auch eine andere Option Sie könnten javascript: void(0);.__ verwenden. Beispiel: <a href="javascript:void(0);" class="open_div">Open Div</a>

Ich denke, es hängt auch davon ab, wann Sie diese Art von Link benötigen. Überprüfen Sie daher die folgenden Links:

Wie man es benutzt: http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ oder prüfen Sie die Debatte darüber, was hier besser ist: Welchen "href" -Wert sollte ich für JavaScript-Links "#" oder "javascript: void (0)" verwenden?

1
jazkat

Setzen Sie diesen Code auf den Kopfbereich.

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

Also verwenden 

parent.location.hash = '' zuerst

dann mach

window.location.href=window.location.href.slice(0, -1);
0
brando