如何在 HTML 頁面中實現重定向？

頁面重定向是指你點選一個 URL 想訪問頁面 X，但實際上卻被導向了另一個頁面 Y 的情況。這是由於頁面重定向造成的。網站設計者在需要更改特定網站的佈局或特定頁面的位置時，會依賴重定向。

要從一個HTML 頁面進行重定向，我們使用META 標籤。同時，我們也使用http-equiv 屬性來為content 屬性的值提供一個HTTP 頭。content 中的值是頁面重定向前的等待秒數。

如果想立即載入，請將 content 屬性設定為 0。否則，如果想稍微延遲重定向，則指定以秒為單位的時間。

語法

<meta http-equiv="refresh" content="time; URL=new_url" />

我們可以看到，重定向需要兩個引數：

  • 時間：表示瀏覽器將使用者重定向到其他頁面之前的延遲。

  • 新 URL：表示延遲後我們需要將使用者重定向到的 URL 地址。

以下是一些示例……

示例

在下面的示例中，我們透過在<meta> 標籤中指定 URL 連結來將頁面重定向到另一個頁面。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Redirect</title>
   <meta http-equiv="refresh" content="5; url = https://tutorialspoint.tw/index.htm" />
</head>
<body>
   <h1>WELCOME TO Tutorialspoint</h1>
   <p>you'll be redirected to Tutorialspoint Homepage, in 5 seconds.</p>
</body>
</html>

執行程式碼後，瀏覽器視窗開啟並等待 5 秒鐘，然後自動重定向到 tutorials point 首頁。

延遲 HTML 頁面的重定向

如果在重定向到另一個頁面或延遲重定向頁面時遇到任何錯誤，這可能是因為使用了舊的瀏覽器。為了解決這個問題，我們將新增一個指向網頁的新連結。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="refresh" content="5; URL=https://tutorialspoint.tw/index.htm" />
</head>
<body>
   <p>If you are not redirected in five seconds, <a href="https://tutorialspoint.tw/index.htm">click here</a>.</p>
</body>
</html>

執行上面的指令碼後，網頁會顯示我們使用<a href>提到的連結，以避免重定向延遲。

更新於：2023年9月10日

31K+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告