首頁 > 文章 > web前端 > 解釋一下 ES6 中的頁面重定向？

解釋一下 ES6 中的頁面重定向？

WBOY轉載: 2023-09-13 16:33:03721瀏覽

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

本教學將介紹 ES6 版本 JavaScript 中引入的頁面重定向。頁面重新導向是一種將網頁訪客從目前 URL 傳送到另一個 URL 的方法。我們可以將使用者重新導向到同一網站的不同網頁或另一個網站或伺服器。

在 JavaScript 中，視窗是一個包含位置物件的全域物件。我們可以在 ES6 中使用 location 物件的不同方法來進行頁面重定向，這就是我們下面要學習的內容。

使用window.location物件的href屬性值

視窗全域物件的location物件包含href屬性。位置物件包含您目前所在網頁的位置的所有資訊。位置物件的「href」屬性包含目前 URL。

要將訪客重新導向到不同的 URL，我們需要更改 Web 瀏覽器中的目前 URL，這可以透過更改 location 物件的 href 屬性的值來實現。

文法

使用者可以依照下列語法透過變更 href 屬性的值將訪客重新導向到另一個頁面。

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

在上面的語法中，如果我們為 window.location 物件指派一個新的 URL 值，預設情況下，會變更 location 物件的 href 屬性的值。

範例

在下面的範例中，我們建立了帶有文字「重定向到另一個網頁」的按鈕。當使用者點擊按鈕時，我們將呼叫 JavaScript 的 redirect() 函數。

在redirect()函數中，我們正在更改位置物件的href屬性的值，這會將訪客帶到新的URL。

<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>

使用location.assign()方法

assign() 是在位置物件內部定義的方法。我們可以使用location.assign()方法在瀏覽器視窗中載入新文檔，在瀏覽器中重新載入新文檔意味著重定向。

文法

依照下面的語法使用 allocate() 方法進行重定向。

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

在上面的語法中，我們將位置物件作為引用來呼叫 allocate() 方法。

參數

New_URL - 這是我們要重定向使用者的 URL。

範例

在此範例中，我們使用位置物件的 allocate() 方法在目前瀏覽器視窗中載入另一個網頁。

<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>

使用location.replace()方法

位置物件的replace()方法與assign()方法的工作方式相同。 Replace() 和 allocate() 方法之間的唯一區別是，replace() 方法用歷史堆疊中的新 URL 取代目前 URL。因此，它不允許歷史堆疊包含有關前一個網頁的信息，這意味著用戶無法返回。

assign() 方法為歷史堆疊新增一個條目。因此，使用者可以使用網頁瀏覽器的後退按鈕返回到上一頁。

文法

使用者可以依照以下語法使用replace()方法進行頁面重定向。

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

參數

Redirection_URL - 重定向 URL 是我們要重新導向網頁訪客的新 URL。

範例

在此範例中，我們使用位置物件的replace()方法將使用者重新導向到新網頁。在輸出中，使用者可以嘗試在重定向後點擊後退按鈕返回。 Replace() 方法不允許回傳。

<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>

此外，使用者還可以使用視窗物件的navigate()方法進行重定向。 navigate() 方法已被棄用，因此不建議用於重定向。

我們學習了 3 到 4 種將使用者重新導向到不同網頁的方法。使用者可以根據自己的需求使用任何方法。例如，如果他們想要取代目前的 URL，請使用 Replace() 方法；否則，請使用 allocate() 方法。使用者可以使用reload()方法來取得新的伺服器資料。

以上是解釋一下 ES6 中的頁面重定向？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript es6 栈堆对象 location href

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用FabricJS取得IText中遊標處字元的目前顏色？下一篇：如何使用FabricJS取得IText中遊標處字元的目前顏色？

看更多