Weiterleiten zu einer Webseite in JavaScript

1. JavaScript Umleiten einer WebSeite mit location.href()
2. JavaScript Umleiten einer Webseite mit location.replace()
3. 3. JavaScript Leiten Sie eine Webseite mit location.assign() um
4. 4. JavaScript Umleitung einer Webseite durch dynamisches Erstellen eines Anchor-Elements
5. Fazit

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:

1. location.href()
2. location.replace()
3. location.assign()
4. 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:

1. Sobald die neue URL geladen ist, ist die ältere Webseite über die Zurück-Taste des Browsers erreichbar.
2. 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:

1. Wir empfehlen, diese Methode nur bei Bedarf zu verwenden.
2. 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:

1. Erstellen eines Ankertag-Elements document.createElement('a');
2. Setzen Sie die Eigenschaft href mit der neuen URL newURL.href = targetURL.
3. Anhängen des dynamisch erstellten Tags an den DOM-Knoten mit document.body.appendChild(newURL)
4. 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.