So ändern Sie die URL in JavaScript, ohne die Seite neu zu laden

Das Ändern der URL, ohne die Seite neu zu laden. Erstellen Sie beispielsweise eine einseitige Website, auf der der Benutzer mit verschiedenen Teilen/Abschnitten der Website interagiert, ohne zu navigieren/zu einer neuen Seite umzuleiten. Dies kann zu einer konsistenten und reaktionsschnellen Benutzererfahrung führen.

In diesem Artikel werden die Methoden zum Ändern der URL beschrieben, ohne die Webseite mit JavaScript neu zu laden.

So ändern/ändern Sie die URL in JavaScript, ohne die Seite neu zu laden?

Um die URL zu ändern, ohne die Webseite neu zu laden, verwenden Sie die folgende vordefinierte JavaScript -Methode:

• PushState () -Methode
• methode ersetzen () ersetzen ()

Methode 1: Ändern Sie die URL in JavaScript, ohne die Seite mit der Methode "pushstate ()" neu zu laden

Um die URL zu ändern, ohne die Webseite neu zu ladenpushstate ()" Methode. Es ist eine Funktion oder die vordefinierte Methode der “GeschichtsobjektDies ermöglicht das Ändern des Browser -Verlaufs, ohne die Seite zu navigieren oder zu aktualisieren. Es fügt oder modifiziert nur den Verlaufsstapel und lädt keine neue Seite. Durch die Verwendung dieses Ansatzes können Sie zwischen den Seiten zwischen den Seiten hin und her wechseln, indem Sie einen neuen Eintrag zum Historiestapel des Browsers hinzufügen.

Syntax
Folgen Sie der angegebenen Syntax für die Methode "pushstate ()":

Fenster.Geschichte.Pushstate (Staat, Titel, URL);

Hier:

• “Zustand”Repräsentiert den neuen Verlaufseintrag.
• “TitelIst der bestimmte Text, der in der Titelleiste des Browsers angezeigt werden kann.
• “URL”Zeigt die ersetzte URL als neuen Eintrag an.

Beispiel
Erstellen Sie in einer HTML -Datei vier Schaltflächen, die das aufrufen "modifyUrl ()”Funktion auf der Schaltfläche Klicken Sie auf:

1
2
3
4

Eine Funktion definieren “modifyUrl ()”In einer JavaScript -Datei, die auf der Schaltfläche klicken. Es braucht zwei Parameter, die “Titel" und das "URL”. Wenn die Methode auf dem Schaltflächenklick aufgerufen wird, wird der „Titel“ und die „URL“ als Argumente übergeben. Überprüfen Sie den Typ der “Pushstate"Des Geschichtsobjekts, wenn es nicht ist"nicht definiert”. Dann rufen Sie das an "Geschichte.pushstate ()Methode, um die URL zu ändern:

Funktion modifyUrl (Titel, URL)
if (typeof (Geschichte.Pushstate) != "undefined")
var obj =
Titel: Titel,
URL: URL
;
Geschichte.Pushstate (OBJ, OBJ.Titel, obj.URL);

Es ist zu sehen, dass die URL bei jedem Schaltfläche erfolgreich geändert wird, ohne die Seite neu zu laden:

In der obigen Ausgabe können Sie feststellen, dass die hintere Pfeilschaltfläche oben links (<-) ist aktiviert, während Sie auf die Schaltfläche klicken. Es zeigt an, dass Sie hin und her navigieren können, weil die “pushstate ()Die Methode fügt die neue URL im History -Stapel hinzu.

Methode 2: Ändern Sie die URL in JavaScript, ohne die Seite mit der Methode "TasteTate ()" neu zu laden

Verwenden Sie die “ersetzen ()Methode zum Ändern der URL, ohne die Webseite neu zu laden. Es ist auch ein Merkmal der “Geschichtsobjekt”Aber es wird den History -Stack keinen neuen Eintrag hinzufügen. Es ändert den bestehenden Zustand der Browser -Geschichte und ersetzt ihn durch einen neuen Staat. Durch die Verwendung dieses Ansatzes können Sie nicht zwischen den Seiten hin und her wechseln.

Syntax
Die angegebene Syntax wird für die Methode „TasteTate ()“ verwendet:

Fenster.Geschichte.Ersetzen (Staat, Titel, URL);

Beispiel
Nennen Sie in der definierten Funktion die “ersetzen ()Methode, um die URL auf der Schaltfläche zu ersetzen, ohne die Seite neu zu laden oder zu navigieren:

Funktion modifyUrl (Titel, URL)
if (typeof (Geschichte.ersetzen) != "undefined")
var obj =
Titel: Titel,
URL: URL
;
Geschichte.ersetzen (obj, obj.Titel, obj.URL);

Die Ausgabe zeigt an, dass die URL bei jedem Schaltflächenklick geändert wurde und es keine Möglichkeit gibt, zu navigieren, um zurück zu gehen, da die Back -Pfeil -Schaltfläche deaktiviert ist:

Wir haben alle wesentlichen Informationen zur Verfügung gestellt, die für die Änderung der URL relevant sind, ohne die Seite in JavaScript neu zu laden.

Abschluss

Um die URL zu ändern/zu ändern, ohne die Webseite zu aktualisieren, verwenden Sie die “pushstate ()”Methode oder die“ersetzen ()" Methode. Die Methode "Pushstate ()" fügt die neue URL als einen neuen Eintrag in einem Verlaufsstapel hinzu und ermöglicht es den Benutzern, hin und her zu navigieren. Während die Methode „ersetzen () die URL ersetzt und nicht zulässt, um sich auf die Rückseite zu bewegen. In diesem Artikel wurden die Methoden zum Ändern der URL beschrieben, ohne die Webseite mit JavaScript neu zu laden.