In diesem Artikel werden die Methoden zum Ändern der URL beschrieben, ohne die Webseite mithilfe von JavaScript neu zu laden.
Wie kann ich die URL in JavaScript ändern/ändern, ohne die Seite neu zu laden?
Um die URL zu ändern, ohne die Webseite neu zu laden, verwenden Sie die folgende vordefinierte JavaScript-Methode:
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 laden, verwenden Sie die „ pushState() ' Methode. Es ist eine Funktion oder die vordefinierte Methode des „ Geschichte Objekt “, die es ermöglicht, den Browserverlauf zu ändern, ohne zu navigieren oder die Seite zu aktualisieren. Es fügt nur den Verlaufsstapel hinzu oder ändert ihn und lädt keine neue Seite. Auf diese Weise können Sie zwischen den Seiten hin- und herwechseln, indem Sie einen neuen Eintrag zum Verlaufsstapel des Browsers hinzufügen.
Syntax
Folgen Sie der angegebenen Syntax für die Methode „pushState()“:
Fenster. Geschichte . pushState ( Zustand , Titel , URL ) ;
Hier:
- „ Zustand “ stellt den neuen Verlaufseintrag dar.
- „ Titel “ ist der spezielle 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 die „ ModifyUrl() ” Funktion auf die Schaltfläche klicken:
< Schaltfläche anklicken = 'modifyUrl('CSS-Tutorial', 'CSSTutorial.html');' > 2 Taste >
< Schaltfläche anklicken = 'modifyUrl('JavaScript-Tutorial', 'JavaScriptTutorial.html');' > 3 Taste >
< Schaltfläche anklicken = 'modifyUrl('Java-Tutorial', 'JavaTutorial.html');' > 4 Taste >
Definiere eine Funktion “ ModifyUrl() “ in einer JavaScript-Datei, die beim Klicken auf die Schaltfläche ausgelöst wird. Es braucht zwei Parameter, die „ Titel ' und das ' URL “. Wenn die Methode auf den Button-Klick aufgerufen wird, werden der „Titel“ und die „URL“ als Argumente übergeben. Überprüfen Sie den Typ des „ pushState ” des Verlaufsobjekts, wenn es nicht “ nicht definiert “. Rufen Sie dann „ history.pushState() ”-Methode zum Ändern der URL:
Funktion ModifyUrl ( Titel , URL ) {
Wenn ( Art der ( Geschichte. pushState ) != 'nicht definiert' ) {
War obj = {
Titel : Titel ,
URL : URL
} ;
Geschichte. pushState ( obj , obj. Titel , obj. URL ) ;
}
}
Es ist ersichtlich, dass bei jedem Klick auf die Schaltfläche die URL erfolgreich geändert wird, ohne die Seite neu zu laden:
In der obigen Ausgabe können Sie sehen, dass die Zurück-Pfeilschaltfläche oben links ( <- ) aktiviert ist, während Sie auf die Schaltfläche klicken, zeigt dies an, dass Sie hin und her navigieren können, da das „ pushState() “-Methode fügt die neue URL zum Verlaufsstapel hinzu.
Methode 2: Ändern Sie die URL in JavaScript, ohne die Seite neu zu laden, indem Sie die Methode „replaceState()“ verwenden
Verwenden Sie das „ Zustand ersetzen () ”-Methode zum Ändern der URL, ohne die Webseite neu zu laden. Es ist auch ein Merkmal des „ Geschichte Objekt “, aber es wird kein neuer Eintrag zum Verlaufsstapel hinzugefügt. Es ändert den bestehenden Zustand des Browserverlaufs und ersetzt ihn durch einen neuen Zustand. Bei diesem Ansatz können Sie nicht zwischen den Seiten hin und her wechseln.
Syntax
Die angegebene Syntax wird für die Methode „replaceState()“ verwendet:
Beispiel
Rufen Sie in der definierten Funktion die „ Zustand ersetzen () ”-Methode, um die URL beim Klicken auf die Schaltfläche zu ersetzen, ohne die Seite neu zu laden oder zu navigieren:
Wenn ( Art der ( Geschichte. Zustand ersetzen ) != 'nicht definiert' ) {
War obj = {
Titel : Titel ,
URL : URL
} ;
Geschichte. Zustand ersetzen ( obj , obj. Titel , obj. URL ) ;
}
}
Die Ausgabe zeigt an, dass bei jedem Klick auf die Schaltfläche die URL geändert wurde und es keine Option zum Zurücknavigieren gibt, da die Schaltfläche mit dem Zurückpfeil deaktiviert ist:
Wir haben alle wesentlichen Informationen zur Änderung der URL ohne Neuladen der Seite in JavaScript bereitgestellt.
Abschluss
Um die URL zu ändern/ändern, ohne die Webseite zu aktualisieren, verwenden Sie die „ pushState() “ Methode oder die „ Zustand ersetzen () ' Methode. Die Methode „pushState()“ fügt die neue URL als neuen Eintrag in einen Verlaufsstapel ein und ermöglicht es Benutzern, hin und her zu navigieren. Während die Methode „replaceState()“ die URL ersetzt und nicht auf die Rückseite wechseln lässt. In diesem Artikel wurden die Methoden zum Ändern der URL ohne Neuladen der Webseite mithilfe von JavaScript beschrieben.