在 HTML 中重定向到一個網頁

Nithin Krishnan 2023年2月19日 2021年4月29日
  1. 使用元重新整理來重定向 HTML
  2. 在 HTML 中使用錨標記重定向
  3. まとめ
在 HTML 中重定向到一個網頁

如果伺服器出現故障或正在維護中,可以使用多種 HTML 方法重新路由使用者。這取決於業務要求,該站點應具有哪種重定向行為。在 UI 中處理重定向可提高效能,因為網頁 HTML 將是第一個呈現的頁面。讓我們從瀏覽 HTML 重定向到另一個網頁的方式開始。

  1. 元重新整理
  2. 錨標籤

使用元重新整理來重定向 HTML

在 HTML 中,瀏覽器可以理解 <meta> 標記。使用此 HTML 標籤,我們可以要求瀏覽器重定向到所述頁面。如果我們想的話,它還允許我們編寫一個延遲程式。

<meta http-equiv="refresh" content="5;url=https://www.delftstack.com" />

這裡包含了兩個引數,即 http-equivcontent

  • http-equiv:類似於 HTTP 請求標頭,傳送其他資訊供瀏覽器理解。此屬性接受各種值。最常用的一種是 content-type,它告訴瀏覽器期望的內容型別。refreshhttp-equiv 的另一個值,它告訴瀏覽器導航到 content 屬性中指定的連結。
  • 內容:包括一個可程式設計的延遲(以秒為單位),以使使用者知道他們正在被重定向。如果他們希望繼續,他們可以或留在原處而無需重定向。URL 是應該進行導航的連結。

備註

  1. 此方法通常在基礎頁面上用於在站點載入之前重定向使用者。
  2. 根據 meta 標記中設定的時間,頁面載入後,meta 重新整理功能將自動重定向使用者。
  3. 包含此程式碼的網頁可能無法通過瀏覽器後退按鈕訪問。
  4. 如果我們未指定 URL,則將重新載入頁面。
  5. 請勿過度使用頁面上的元重定向標籤。它被視為包含垃圾內容,並可能影響搜尋引擎列表的聲譽。

在 HTML 中使用錨標記重定向

你可能熟悉 HTML 中的錨標記。它廣泛用於網頁中以導航到子頁面或外部網站。與 meta 重新整理方法不同,錨標籤是靜態的。因此,它需要一個事件(單擊)來呼叫它。我們可以通過以下方式使用定位標記來重定向使用者:

<a href='https://www.delftstack.com/'>Go to Delfstack</a>
<a href='/tutorial'>Tutorials</a>
  • 第一種方法使用整個 URL(https://www.delftstack.com/)作為值傳遞給 <a> 標記的 href 屬性;如果我們需要離開應用程式並導航到外部站點,則此方法有效。可以使用瀏覽器的後退按鈕返回到原始頁面。
  • 第二種方法用於導航到站點內的頁面。在這種情況下,我們提到了預期頁面的相對路徑(/tutorial)。瀏覽器將此相對路徑轉換為 https://www.delftstack.com/tutorial

備註

  1. 此方法基於使用者互動(用於導航的 click 事件)。
  2. 可以使用 Anchor 標籤重定向方法在網站內或到其他網站進行路由。
  3. 如果我們沒有將任何 URL 傳遞給 href 屬性,則單擊錨標記將重新載入當前頁面。

まとめ

根據業務需求,最好在使用者進入維護網站網頁時使用 meta 重新整理方法來重定向使用者。它使我們可以自由地引入延遲,以向使用者顯示訊息以進行重新路由。如果要基於事件(例如使用者單擊)進行導航,則使用定位標記非常普遍。