Wie entferne ich einen URL-Hash, ohne die Seite mit JavaScript zu aktualisieren?

Entfernen des Hashs aus der URL ohne Seitenaktualisierung mit JavaScript

Wenn Sie auf URLs wie „http://example.com#something“ stoßen mit einer Hash-Komponente (#) am Ende, kann es schwierig sein, sie zu entfernen, ohne die Seite zu aktualisieren. Herkömmliche Methoden, bei denen „window.location.hash“ auf eine leere Zeichenfolge gesetzt wird, können das Hash-Symbol selbst nicht entfernen.

Lösung: HTML5-Verlaufs-API

Moderne Browser bieten dies eine Lösung über die HTML5 History API. Mithilfe der Funktion „history.pushState()“ können wir die Standortleiste so ändern, dass eine neue URL angezeigt wird, ohne eine Seitenaktualisierung auszulösen.

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

Diese Methode entfernt effektiv den Hash aus der URL in aktuellen und kompatible Browser, einschließlich Chrome, Firefox, Safari, Opera und Internet Explorer 10 und höher.

Graceful Degradation for Unsupported Browser

Für Browser, die die History-API nicht unterstützen, können Sie ein elegantes Degradationsskript verwenden:

function removeHash() {
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Preserve current scroll position
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore scroll position
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Dieser Ansatz stellt die Kompatibilität zwischen verschiedenen Browsern sicher und eliminiert das Hash-Symbol ohne verursacht Seitenaktualisierungen.

Hinweis:

• Um die zu ersetzen Aktuellen Verlaufseintrag, anstatt einen neuen hinzuzufügen, verwenden Sie „replaceState()“ anstelle von „pushState()“.
• Das Entfernen des Hashs hängt von der Browserunterstützung ab. Diese Lösung bietet jedoch einen umfassenden Ansatz, der sowohl unterstützte als auch nicht unterstützte Browser abdeckt.

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