用 JavaScript 重定向到一個網頁
-
JavaScript 使用
location.href()
重定向網頁 -
JavaScript 使用
location.replace()
重定向網頁 -
JavaScript 使用
location.assign()
重定向網頁 - JavaScript 通過動態建立錨元素來重定向網頁
- まとめ
JavaScript 中有多種方法可以重新路由使用者。這取決於業務要求,該站點應具有哪種重定向行為。你可以通過以下方式重定向使用者:
location.href()
location.replace()
location.assign()
- 動態建立錨元素
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/";
備註
- 載入新的 URL 後,可通過瀏覽器後退按鈕訪問較舊的網頁。
- 這是最常用的重定向方法
JavaScript 使用 location.replace()
重定向網頁
如果你希望永久地移至網頁,請使用 location.replace
。區別在於,location.replace
將用新的 URL 替換當前的 URL。因此,使用者將無法返回到先前的 URL。就瀏覽器歷史記錄堆疊而言,該方法會彈出最後一個網頁 URL,並將 URL 推送到值中。
window.location.replace("https://www.delftstack.com");
執行此操作將載入 https://www.delftstack.com
網站。
備註
- 我們建議僅在必要時使用此方法。
- 無法使用此方法返回上一連結。因此,這可能不是良好的使用者體驗。
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();
在這裡,我們通過以下方式實現重定向:
- 建立錨標籤元素
document.createElement('a');
- 使用
新 URL newURL.href = targetURL
設定href
屬性 - 使用
document.body.appendChild(newURL)
將動態建立的標籤附加到 DOM 節點 - 最後,通過模擬使用者點選
newURL.click()
來呼叫它。
瀏覽器將載入新的 URL。
まとめ
根據業務需求,最好在使用者進入維護不足的網站網頁時使用 meta 重新整理方法來重定向使用者。如果導航旨在基於使用者單擊,則使用錨標籤非常普遍。我們可以使用 JavaScript 中 locationwindow.location.href
和 window.location.assign()
,以程式設計方式將使用者傳送到新的 URL。