Heim > Artikel > Web-Frontend > Seitenumleitung in ES6 erklären?

Seitenumleitung in ES6 erklären?

WBOYnach vorne: 2023-09-13 16:33:03660Durchsuche

解释一下 ES6 中的页面重定向？

In diesem Tutorial wird die Seitenumleitung vorgestellt, die in der ES6-Version von JavaScript eingeführt wurde. Bei der Seitenumleitung handelt es sich um eine Methode, Webseitenbesucher von der aktuellen URL zu einer anderen URL weiterzuleiten. Wir leiten Benutzer möglicherweise auf eine andere Seite derselben Website oder auf eine andere Website oder einen anderen Server weiter.

In JavaScript ist ein Fenster ein globales Objekt, das ein Positionsobjekt enthält. Wir können verschiedene Methoden des Standortobjekts verwenden, um Seiten in ES6 umzuleiten, was wir als Nächstes lernen werden.

Verwenden Sie den href-Attributwert des window.location-Objekts

Das Standortobjekt des globalen Fensterobjekts enthält das href-Attribut. Das Standortobjekt enthält alle Informationen über den Standort der Seite, auf der Sie sich gerade befinden. Das „href“-Attribut des Standortobjekts enthält die aktuelle URL.

Um Besucher auf eine andere URL umzuleiten, müssen wir die aktuelle URL im Webbrowser ändern. Dies kann durch Ändern des Werts des href-Attributs des Standortobjekts erreicht werden.

Grammatik

Benutzer können Besucher auf eine andere Seite umleiten, indem sie den Wert des href-Attributs ändern, indem sie der folgenden Syntax folgen.

window.location = "<new_URL>";
window.location.href = "<new_URL>";

Wenn wir in der obigen Syntax dem window.location-Objekt einen neuen URL-Wert zuweisen, wird standardmäßig der Wert des href-Attributs des Standortobjekts geändert.

Beispiel

Im folgenden Beispiel haben wir eine Schaltfläche mit dem Text „Zu einer anderen Webseite weiterleiten“ erstellt. Wenn der Benutzer auf die Schaltfläche klickt, rufen wir die Funktion „redirect()“ von JavaScript auf.

In der Funktion „redirect()“ ändern wir den Wert des href-Attributs des Standortobjekts, wodurch der Besucher zur neuen URL weitergeleitet wird.

<html>
<body>
   <h2>Using window.location.href attribute for page redirection</h2>
   <p>Click below button to redirect </p>
   <button id="redirect" onclick="redirect()">
   Redirect to the another webpage
   </button>
   <script type="text/javascript">
      function redirect(){
         window.location.href="https://tutorialspoint.com/"
      }
   </script>
</body>
</html>

Verwenden Sie die Methode location.assign()

assign() ist eine Methode, die im Standortobjekt definiert ist. Mit der Methode location.assign() können wir ein neues Dokument in das Browserfenster laden, das erneute Laden eines neuen Dokuments in den Browser bedeutet eine Umleitung.

Grammatik

Verwenden Sie die allocate()-Methode, um gemäß der folgenden Syntax umzuleiten.

window.location.assign("<new_URL>");

In der obigen Syntax rufen wir die Methode allocate() mit dem Standortobjekt als Referenz auf.

Parameter

Neue_URL – Dies ist die URL, zu der wir den Benutzer umleiten möchten.

Beispiel

In diesem Beispiel verwenden wir die allocate()-Methode des Standortobjekts, um eine andere Webseite im aktuellen Browserfenster zu laden.

<html>
<body>
   <p>Using the <i>window.location.assign()</i> method to redirect users to another webpage.</p>
   <button id="redirect" onclick="redirect()">Redirect </button>
   <script type="text/javascript">
      function redirect(){
         window.location.assign("https://www.tutorialspoint.com ");
      }
   </script>
</body>
</html>

Verwenden Sie die Methode location.replace()

Die Methode

replace() des Standortobjekts funktioniert genauso wie die Methode „assign()“. Der einzige Unterschied zwischen den Methoden „Replace()“ und „allocate()“ besteht darin, dass die Methode „replace()“ die aktuelle URL durch eine neue URL aus dem Verlaufsstapel ersetzt. Daher ist es nicht möglich, dass der Verlaufsstapel Informationen über die vorherige Webseite enthält, was bedeutet, dass der Benutzer nicht zurückgehen kann. Die Methode

assign() fügt einen neuen Eintrag zum Verlaufsstapel hinzu. Daher kann der Benutzer über die Zurück-Schaltfläche des Webbrowsers zur vorherigen Seite zurückkehren.

Grammatik

Benutzer können die Methode replace() verwenden, um die Seite gemäß der folgenden Syntax umzuleiten.

Window.location.replace("<redirection_URL>")

Parameter

Redirection_URL – Die Weiterleitungs-URL ist die neue URL, zu der wir Besucher auf unsere Webseite umleiten möchten.

Beispiel

In diesem Beispiel verwenden wir die Methode replace() des Standortobjekts, um den Benutzer auf eine neue Webseite umzuleiten. In der Ausgabe kann der Benutzer versuchen, zurückzugehen, indem er nach der Weiterleitung auf die Schaltfläche „Zurück“ klickt. Die Methode „Replace()“ darf nicht zurückkehren.

<html>
<body>
   <p>Using the <i>window.location.replace()</i> method to redirect users to another webpage.</p>
   <button id="redirect" onclick="redirect()">Redirect </button>
   <script type="text/javascript">
      function redirect(){
         window.location.replace("https://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

Darüber hinaus können Benutzer zur Umleitung auch die navigation()-Methode des Fensterobjekts verwenden. Die Methode „navigation()“ ist veraltet und wird daher nicht für die Umleitung empfohlen.

Wir haben 3 bis 4 Möglichkeiten kennengelernt, Benutzer auf verschiedene Webseiten umzuleiten. Benutzer können je nach Bedarf jede Methode verwenden. Wenn sie beispielsweise die aktuelle URL ersetzen möchten, verwenden Sie die Methode „Replace()“; andernfalls verwenden Sie die Methode „allocate()“. Benutzer können die Methode reload() verwenden, um neue Serverdaten abzurufen.

Das obige ist der detaillierte Inhalt vonSeitenumleitung in ES6 erklären?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript es6 栈堆对象 location href

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erhalte ich mit FabricJS die aktuelle Farbe des Zeichens am Cursor in IText?Nächster Artikel：Wie erhalte ich mit FabricJS die aktuelle Farbe des Zeichens am Cursor in IText?

In Verbindung stehende Artikel

Mehr sehen