Heim > Web-Frontend > js-Tutorial > Wie kann ich einen URL-Hash entfernen, ohne die Seite mithilfe von JavaScript zu aktualisieren?

Wie kann ich einen URL-Hash entfernen, ohne die Seite mithilfe von JavaScript zu aktualisieren?

Patricia Arquette
Freigeben: 2024-11-30 10:53:10
Original
936 Leute haben es durchsucht

How Can I Remove a URL Hash Without Refreshing the Page Using JavaScript?

Hash von URL ohne Seitenaktualisierung mit JavaScript entfernen

Bei der Arbeit mit URLs ist es oft wünschenswert, das Hash-Fragment (#something) zu entfernen ), ohne dass die Seite aktualisiert wird. Dies kann mithilfe der HTML5-Verlaufs-API erreicht werden, die eine Manipulation der Standortleiste ermöglicht.

Eine Lösung ist:

window.location.hash = '';
Nach dem Login kopieren

Dadurch wird jedoch nur der Inhalt des Hashs entfernt, während das # übrig bleibt. Symbol in der URL.

Für eine umfassendere Lösung:

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

Diese Methode funktioniert in Chrome, Firefox, Safari, Opera und IE 10. Für Browser, die dies nicht unterstützen, kann ein elegantes Degradationsskript verwendet werden:

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 current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore scroll offset to avoid flickering
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}
Nach dem Login kopieren

Mit dieser Technik können Sie den Hash effektiv aus einer URL entfernen, ohne dass die Seite beschädigt wird aktualisieren, unabhängig von der Browserunterstützung.

Das obige ist der detaillierte Inhalt vonWie kann ich einen URL-Hash entfernen, ohne die Seite mithilfe von JavaScript zu aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage