Weiterleiten zu einer Webseite in JavaScript
-
JavaScript Umleiten einer WebSeite mit
location.href()
-
JavaScript Umleiten einer Webseite mit
location.replace()
-
3. JavaScript Leiten Sie eine Webseite mit
location.assign()
um - 4. JavaScript Umleitung einer Webseite durch dynamisches Erstellen eines Anchor-Elements
- Fazit
![Weiterleiten zu einer Webseite in JavaScript](/img/JavaScript/feature-image---javascript-redirect.webp)
In JavaScript gibt es verschiedene Möglichkeiten, den Benutzer umzuleiten. Es hängt von den Geschäftsanforderungen ab, welche Art von Weiterleitungsverhalten die Site haben soll. Sie können Ihre Benutzer auf folgende Weise umleiten:
location.href()
location.replace()
location.assign()
- Erstellen Sie das Ankerelement dynamisch
JavaScript Umleiten einer WebSeite mit location.href()
Verwenden Sie zur Weiterleitung die Schnittstelle location
in Verbindung mit den Objekten Document
und Window
. In der Regel gibt die Datei window.location.href
die URL der aktuellen Seite zurück. Wenn Sie beispielsweise den folgenden Code ausführen, wird die Seiten-URL angezeigt:
console.log(window.location.href)
Ausgabe:
"https://www.delftstack.com/"
Der Trick besteht darin, diese URL zu ersetzen, indem der window.location.href
eine andere URL zugewiesen wird. Dadurch lädt der Browser die durch die URL angegebene Seite und leitet sie weiter. In Bezug auf den Site-Verlaufsstapel ändert diese Methode die aktuelle Referenz-URL. Der folgende Code navigiert zur How-to-Seite von DelfStack
.
window.location.href = 'https://www.delftstack.com/howto/';
Bemerkungen:
- Sobald die neue URL geladen ist, ist die ältere Webseite über die Zurück-Taste des Browsers erreichbar.
- Es ist die am häufigsten verwendete Methode zur Umleitung
JavaScript Umleiten einer Webseite mit location.replace()
Wenn Sie dauerhaft auf eine Webseite wechseln möchten, verwenden Sie location.replace
. Der Unterschied besteht darin, dass location.replace
die aktuelle URL durch eine neue URL ersetzt. Daher kann der Benutzer nicht zur vorherigen URL zurückkehren. In Bezug auf den Browserverlaufsstapel öffnet die Methode die letzte Webseiten-URL und verschiebt die URL in den Wert.
window.location.replace('https://www.delftstack.com');
Wenn Sie dies ausführen, wird die Website https://www.delftstack.com
geladen.
Bemerkungen:
- Wir empfehlen, diese Methode nur bei Bedarf zu verwenden.
- Mit dieser Methode kann man nicht zum vorherigen Link zurückkehren. Daher ist es möglicherweise keine gute Benutzererfahrung.
3. JavaScript Leiten Sie eine Webseite mit location.assign()
um
Wie die Methode location.replace()
weist auch die Methode assign()
den Unterschied auf, dass der aktuelle Link im Browserverlauf verbleibt. Der Benutzer kann also mit der Zurück-Schaltfläche des Browsers auf die vorherige Seite zurückkehren. Diese Methode nimmt ebenfalls die Ziel-URL als Parameter an.
window.location.assign('https://www.delftstack.com');
4. JavaScript Umleitung einer Webseite durch dynamisches Erstellen eines Anchor-Elements
In älteren Browsern, insbesondere Internet Explorer mit Version 8 oder niedriger, wird die Standortschnittstelle nicht unterstützt. Daher erstellen wir dynamisch ein Ankertag (<a>
) und setzen das Attribut href
mit der Ziel-URL. Wie bereits erwähnt, ist das Ankertag ein passives Element, für dessen Aufruf eine Benutzerinteraktion erforderlich ist. Daher wird im Code ein Klickereignis ausgelöst, damit die Umleitung funktioniert.
let targetURL = 'https://www.delftstack.com';
let newURL = document.createElement('a');
newURL.href = targetURL;
document.body.appendChild(newURL);
newURL.click();
Hier erreichen wir die Weiterleitung durch:
- Erstellen eines Ankertag-Elements
document.createElement('a');
- Setzen Sie die Eigenschaft
href
mit derneuen URL newURL.href = targetURL
. - Anhängen des dynamisch erstellten Tags an den DOM-Knoten mit
document.body.appendChild(newURL)
- Klicken Sie abschließend durch Emulieren eines Benutzers auf
newURL.click()
.
Der Browser lädt die neue URL.
Fazit
Abhängig von den Geschäftsanforderungen empfiehlt es sich, die Metaaktualisierungsmethode zu verwenden, um einen Benutzer umzuleiten, sobald er auf der Webseite der zu wartenden Website landet. Die Verwendung eines Ankertags ist weit verbreitet, wenn die Navigation auf der Grundlage eines Benutzerklicks erfolgen soll. Wir können Methoden der Location-Schnittstelle in JavaScript, window.location.href
und window.location.assign()
, verwenden, um einen Benutzer programmgesteuert an eine neue URL zu senden.