用 JavaScript 重定向到一個網頁

Nithin Krishnan 2023年1月30日 2021年4月29日
  1. JavaScript 使用 location.href() 重定向網頁
  2. JavaScript 使用 location.replace() 重定向網頁
  3. JavaScript 使用 location.assign() 重定向網頁
  4. JavaScript 通過動態建立錨元素來重定向網頁
  5. まとめ
用 JavaScript 重定向到一個網頁

JavaScript 中有多種方法可以重新路由使用者。這取決於業務要求,該站點應具有哪種重定向行為。你可以通過以下方式重定向使用者:

  1. location.href()
  2. location.replace()
  3. location.assign()
  4. 動態建立錨元素

JavaScript 使用 location.href() 重定向網頁

location 介面與 DocumentWindow 物件一起使用進行重定向。通常,window.location.href 返回當前頁面的 URL。例如,如果執行以下程式碼,你將看到頁面 URL:

console.log(window.location.href)

輸出:

"https://www.delftstack.com/"

訣竅是通過為 window.location.href 分配一個不同的 URL 來替換此 URL。這將使瀏覽器載入 URL 指定的頁面,從而重定向到該頁面。就網站歷史記錄堆疊而言,此方法更改當前參考 URL。以下程式碼將導航到 DelfStack 的操作方法頁面。

window.location.href = "https://www.delftstack.com/howto/";

備註

  1. 載入新的 URL 後,可通過瀏覽器後退按鈕訪問較舊的網頁。
  2. 這是最常用的重定向方法

JavaScript 使用 location.replace() 重定向網頁

如果你希望永久地移至網頁,請使用 location.replace。區別在於,location.replace 將用新的 URL 替換當前的 URL。因此,使用者將無法返回到先前的 URL。就瀏覽器歷史記錄堆疊而言,該方法會彈出最後一個網頁 URL,並將 URL 推送到值中。

window.location.replace("https://www.delftstack.com");

執行此操作將載入 https://www.delftstack.com 網站。

備註

  1. 我們建議僅在必要時使用此方法。
  2. 無法使用此方法返回上一連結。因此,這可能不是良好的使用者體驗。

JavaScript 使用 location.assign() 重定向網頁

location.replace() 一樣,assign() 方法也具有以下區別:當前連結保留在瀏覽器歷史記錄中。因此,使用者將能夠使用瀏覽器後退按鈕返回上一頁。此方法還將目標 URL 作為引數。

window.location.assign("https://www.delftstack.com");

JavaScript 通過動態建立錨元素來重定向網頁

在較舊的瀏覽器中,尤其是版本 8 或更低版本的 Internet Explorer,不支援位置介面。因此,我們動態建立錨標籤(<a>),並使用目標 URL 設定 href 屬性。如前所述,錨標籤是一個被動元素,需要使用者互動才能呼叫它。因此,在程式碼中觸發了 click 事件,以使重定向生效。

let targetURL = 'https://www.delftstack.com';
let newURL = document.createElement('a');
newURL.href = targetURL;
document.body.appendChild(newURL);
newURL.click();

在這裡,我們通過以下方式實現重定向:

  1. 建立錨標籤元素 document.createElement('a');
  2. 使用新 URL newURL.href = targetURL 設定 href 屬性
  3. 使用 document.body.appendChild(newURL) 將動態建立的標籤附加到 DOM 節點
  4. 最後,通過模擬使用者點選 newURL.click() 來呼叫它。

瀏覽器將載入新的 URL。

まとめ

根據業務需求,最好在使用者進入維護不足的網站網頁時使用 meta 重新整理方法來重定向使用者。如果導航旨在基於使用者單擊,則使用錨標籤非常普遍。我們可以使用 JavaScript 中 locationwindow.location.hrefwindow.location.assign(),以程式設計方式將使用者傳送到新的 URL。

相關文章 - JavaScript Redirect