用 JavaScript 重定向到一個網頁

1. JavaScript 使用 location.href() 重定向網頁
2. JavaScript 使用 location.replace() 重定向網頁
3. JavaScript 使用 location.assign() 重定向網頁
4. JavaScript 通過動態建立錨元素來重定向網頁
5. まとめ

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

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

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

將 location 介面與 Document 和 Window 物件一起使用進行重定向。通常，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.href 和 window.location.assign()，以程式設計方式將使用者傳送到新的 URL。