Ändern der URL in JavaScript, ohne die Seite neu zu laden

Dynamische Änderung der URL mit JavaScript

Wenn Sie mit modernen Webanwendungen arbeiten, müssen Sie möglicherweise die URL ändern, ohne dass ein Neuladen der Seite ausgelöst wird. Dies kann besonders nützlich sein, um ein nahtloses Benutzererlebnis zu schaffen.

In diesem Leitfaden untersuchen wir Methoden zum Ändern des Teils der URL nach der Domain, einschließlich Techniken, die Ihnen den Zugriff auf den Teil vor dem Rautesymbol (#) ermöglichen. Dadurch wird die Einhaltung domänenübergreifender Richtlinien sichergestellt und gleichzeitig die gewünschte URL-Änderung erreicht.

Detaillierte Erläuterung der URL-Änderung in JavaScript

Das erste Skript verwendet das history.pushState() -Methode, die Teil der History-API ist. Mit diesem Befehl können Entwickler einen neuen Eintrag zum Sitzungsverlaufsstapel des Browsers hinzufügen und so die in der Adressleiste angezeigte URL effektiv ändern, ohne die Seite neu laden zu müssen. Im Drehbuch, const newURL = "/page2.php"; legt den neuen Weg fest und history.pushState(null, "", newURL); ändert die URL in diesen neuen Pfad. Durch das Einwickeln der history.pushState Befehl in einer Funktion wie function changeURL(newPath)können wir die URL nach Bedarf dynamisch aktualisieren. Diese Technik ist besonders nützlich für Single-Page-Anwendungen (SPAs), bei denen sich Inhalte dynamisch ändern, ohne dass die gesamte Seite neu geladen werden muss.

Das zweite Skript befasst sich mit der Änderung des URL-Hashs window.location.hash. Diese Eigenschaft ruft den Ankerteil der URL ab, der auf das Hash-Symbol (#) folgt, oder legt diesen fest. Indem man es einstellt const hashValue = "newSection"; Und window.location.hash = hashValue;, ändert sich der URL-Hash zu #newSection, ohne dass die Seite neu geladen wird. Dieser Ansatz eignet sich zum Navigieren innerhalb derselben Seite oder zum Verknüpfen mit bestimmten Abschnitten innerhalb eines Dokuments. Zusätzlich die Funktion function updateHash(newHash) kapselt diese Funktionalität und macht es einfach, den Hash-Teil der URL dynamisch zu ändern. Beide Skripte bieten nahtlose Möglichkeiten, die URL zu ändern und die Benutzererfahrung zu verbessern, indem unnötige Seitenneuladevorgänge vermieden werden.

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

Erkunden zusätzlicher Methoden zum Ändern der URL ohne Neuladen

Ein weiterer Aspekt beim Ändern der URL ohne Neuladen der Seite ist die Verwendung von replaceState() Methode aus der History-API. Während pushState() fügt einen neuen Verlaufseintrag hinzu, replaceState() Ändert den aktuellen Verlaufseintrag. Dies kann besonders nützlich sein, wenn Sie die URL ändern möchten, ohne den Benutzerverlauf mit mehreren Status zu überladen. Wenn Sie beispielsweise über eine einseitige Anwendung verfügen, deren Inhalt sich häufig ändert, möchten Sie möglicherweise die URL aktualisieren, um den aktuellen Status widerzuspiegeln, ohne jede Änderung zum Verlauf hinzuzufügen. Dadurch bleibt die Funktionalität der Zurück-Taste sauber und benutzerfreundlich.

Benutzen replaceState()können Sie eine ähnliche Funktion schreiben changeURL() sondern stattdessen anrufen history.replaceState() im Inneren. Zum Beispiel, function replaceURL(newPath) nutzen könnte history.replaceState(null, "", newPath); um die URL zu aktualisieren. Diese Technik ist wertvoll für die Verbesserung der Benutzererfahrung, indem sie die URL mit dem Status der Anwendung synchron hält, ohne unnötige Verlaufseinträge zu erstellen. Darüber hinaus bietet es eine effizientere Möglichkeit, den Browserverlauf zu verwalten, insbesondere in dynamischen Webanwendungen.