JavaScript - 頁面重定向

什麼是頁面重定向？

您可能遇到過這樣的情況：您點選了一個 URL 要訪問頁面 X，但實際上您被重定向到了另一個頁面 Y。這是由於 **頁面重定向** 造成的。這個概念與 JavaScript 頁面重新整理不同。

您可能出於各種原因想要將使用者從原始頁面重定向到其他頁面。我們列出了一些原因：-

您不喜歡您的域名，並且要遷移到一個新的域名。在這種情況下，您可能希望將所有訪問者重定向到新網站。您可以保留舊域名，但將其指向一個包含頁面重定向的單一頁面，以便所有舊域名訪問者都能訪問您的新域名。
您根據瀏覽器版本或名稱，或者可能是根據不同的國家/地區構建了多個頁面，那麼，與其使用伺服器端頁面重定向，不如使用客戶端頁面重定向將您的使用者引導到相應的頁面。
搜尋引擎可能已經索引了您的頁面。但在遷移到另一個域名時，您不希望失去來自搜尋引擎的訪問者。因此，您可以使用客戶端頁面重定向。但請記住，不要這樣做來欺騙搜尋引擎，這可能導致您的網站被封禁。

頁面重定向是如何工作的？

頁面重定向的實現如下所示。

示例 1

使用客戶端的 JavaScript 進行頁面重定向非常簡單。要將您的網站訪問者重定向到新頁面，您只需在頭部部分新增一行程式碼，如下所示。

<html>
<head>
    <title>Page Redirection Example</title>
</head>
<body>
    <p>Click the following button, you will be redirected to home page.</p>
    <form>
        <input type="button" value="Redirect Me" onclick="Redirect();" />
    </form>
    <script type="text/javascript">
        function Redirect() {
            window.location = "https://tutorialspoint.tw";
        }
    </script>
</body>
</html>

示例 2

在將訪問者重定向到新頁面之前，您可以向他們顯示一條適當的訊息。這需要一點時間延遲才能載入新頁面。以下示例顯示瞭如何實現這一點。這裡的 **setTimeout()** 是一個內建的 JavaScript 函式，可用於在給定時間間隔後執行另一個函式。

<html>
<head>
    <title>Page Redirection Example</title>
</head>
<body>
    <p>You will be redirected to main page in 10 sec.</p>
    <script>
        function redirect() {
           window.location = "https://tutorialspoint.tw";
        }            
        setTimeout('redirect()', 10000);
    </script>
</body>
</html>

輸出

You will be redirected to tutorialspoint.com main page in 10 seconds!

示例 3

以下示例顯示瞭如何根據使用者的瀏覽器將他們重定向到不同的頁面。

<html>
<head>     
   <title>Browser Redirect</title>
</head>   
<body>
   <script type = "text/javascript">
      var browsername = navigator.appName;
      if( browsername == "Netscape" ) {
         window.location = "https://tutorialspoint.tw/javascript/index.htm";
      } else if ( browsername =="Microsoft Internet Explorer") {
         window.location = "https://tutorialspoint.tw/articles/category/Javascript";
      } else {
         window.location = "https://tutorialspoint.tw/";
      }
   </script>      
</body>
</html>

列印頁面