Wie entfernt man Parameter in der URL und zeigt sie in der Adressleiste an, ohne eine Weiterleitung in Javascript zu verursachen?

Question

Ich habe viele Antworten darüber gefunden, wie man die URL ohne die Parameter extrahiert.

Wie kann man die URL in der Adressleiste umschreiben, ohne dass die Seite mit der neuen URL neu geladen wird?

shortURL = top.location.href.substring(0, top.location.href.indexOf('?'));
top.location.href = shortURL // Verursacht eine Weiterleitung

Das Ziel ist es, die Parameter in Javascript zu extrahieren, aber sie nicht in der Adressleiste anzuzeigen.

Answer 1

In modernen Browsern mit Unterstützung für das History-Objekt können Sie entweder history.replaceState() oder history.pushState() verwenden, um die aktuelle URL zu ändern, ohne die aktuelle Seite zu ändern. Es gibt Einschränkungen, was Sie ändern können (zum Beispiel können Sie aus Sicherheitsgründen nicht die Domain/den Ursprung auf diese Weise ändern).

Sehen Sie sich hier eine Zusammenfassung dieser Methoden an.

Die Browser-Historie ist eine Aufzeichnung, wo Sie in Ihrer Browsing-Sitzung waren. .replaceState() ermöglicht es Ihnen, den aktuellen Eintrag in der Historienliste durch einen anderen zu ersetzen. .pushState() fügt ein neues Element zur Browser-Historie hinzu, und beide ändern die angezeigte URL in der Browser-URL-Leiste, ohne die Seite neu zu laden. Sie wählen aus, welche Methode Sie verwenden möchten, abhängig davon, wie sich die Schaltfläche "Zurück" des Browsers für diesen bestimmten Seiteneintrag verhalten soll.

Hinweis: Diese APIs werden in IE 10 und höher unterstützt.

In älteren Browser-Versionen ohne Unterstützung für die History-API können Sie nur den Hash-Tag (den Teil nach einem #-Symbol) am Ende der URL ändern, ohne die Seite neu zu laden.

Answer 2

Im HTML5 ist es möglich, die URL ohne Neuladen der Seite umzuschreiben (Sie können den Domainnamen aus Sicherheitsgründen nicht ändern), indem Sie die History-API verwenden:

history.replaceState("Objekt oder String", "Titel", "/eine-andere-neue-url");

bei denen die ersten beiden Parameter irgendwie arbiträr sind und der dritte Parameter die neue URL ist (ohne Domainnamen). Wenn Sie möchten, dass die Schaltfläche "Zurück" aktiviert wird, um zur vorherigen URL zurückzukehren, verwenden Sie pushState anstelle von replaceState oben. Lesen Sie mehr über diese Funktionen in diesem Blog-Beitrag.

In Bezug auf die Browserunterstützung wird dies in den aktuellen Firefox- und Chrome-Versionen unterstützt, aber nur in IE10+, was noch nicht sehr verbreitet ist. Weitere Details finden Sie in der Kompatibilitätsmatrix oder in den Details zur Browserimplementierung.

Answer 3

Sie können den Wert in der Adressleiste nicht ändern, ohne umgeleitet zu werden. Das wäre der Traum eines Phishing-Betrügers!

Sie können jedoch den Fragment-Identifier ändern: (in JavaScript, den Wert window.location.hash)

Dies ist ein Test

window.onload = function() {
    window.location.hash = "Geladen!";
    document.getElementById("click-me").onclick = function() {
        window.location.hash = "Klick!";
        document.getElementById("click-me").onclick = function() {
            window.location.hash = "Erneut geklickt!";
        };
    };
}

Aber das Ändern der Abfragezeichenfolge wird die Seite umleiten.

Answer 4

Sie können möglicherweise das neue pushstate verwenden, das Teil der HTML 5 History-API ist, und es ermöglicht Ihnen, die URL zu ändern, ohne den Browser tatsächlich neu zu laden.

Überprüfen Sie http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate für ein schnelles Beispiel und http://diveintohtml5.info/history.html für weitere ausführliche Beispiele und Einschränkungen:

Answer 5

Ich denke nicht, dass es dafür eine Möglichkeit gibt. Du könntest die URL wahrscheinlich nach dem Laden neu schreiben und return false hinzufügen, um das erneute Laden zu verhindern. Ansonsten müsstest du jedoch ein Formular-POST an die URL senden, um zu erreichen, dass kein Parameter angezeigt wird.