ES6 - 頁面重定向

重定向是一種將使用者和搜尋引擎從他們最初請求的URL傳送到另一個URL的方法。頁面重定向是一種自動將一個網頁重定向到另一個網頁的方法。重定向的頁面通常在同一個網站上，也可以在不同的網站或Web伺服器上。

JavaScript 頁面重定向

window.location 和 window.location.href

在JavaScript中，您可以使用多種方法將一個網頁重定向到另一個網頁。幾乎所有方法都與window.location物件相關，該物件是Window物件的屬性。它可以用來獲取當前的URL地址（網址）以及將瀏覽器重定向到新頁面。就行為而言，這兩種用法相同。window.location返回一個物件。如果未設定.href，則window.location預設為更改引數.href。

示例

<!DOCTYPE html> 
<html> 
   <head> 
      <script> 
         function newLocation() { 
            window.location = "http://www.xyz.com"; 
         } 
      </script> 
   </head> 

   <body> 
      <input type = "button" value = "Go to new location" onclick = "newLocation()"> 
   </body> 
</html>

location.replace()

另一個最常用的方法是window.location物件的replace()方法，它將用新的文件替換當前文件。在replace()方法中，您可以傳遞一個新的URL給replace()方法，它將執行HTTP重定向。

以下是相同的語法。

window.location.replace("http://www.abc.com

location.assign()

location.assign()方法在瀏覽器視窗中載入一個新的文件。

以下是相同的語法。

window.location.assign("http://www.abc.org");

assign() vs. replace()

assign()和replace()方法的區別在於，location.replace()方法會刪除文件歷史記錄中的當前URL，因此無法返回到原始文件。在這種情況下，您無法使用瀏覽器的“後退”按鈕。如果您想避免這種情況，應該使用location.assign()方法，因為它會在瀏覽器中載入一個新的文件。

location.reload()

location.reload()方法重新載入瀏覽器視窗中的當前文件。

以下是相同的語法。

window.location.reload("http://www.yahoo.com");

window.navigate()

window.navigate()方法類似於為window.location.href屬性賦值一個新值。因為它只在MS Internet Explorer中可用，所以您應該避免在跨瀏覽器開發中使用它。

以下是相同的語法。

window.navigate("http://www.abc.com");

重定向和搜尋引擎最佳化

如果您想通知搜尋引擎 (SEO) 您的URL轉發，您應該將rel = "canonical"元標記新增到您的網站頭部，因為搜尋引擎不會分析JavaScript來檢查重定向。

以下是相同的語法。

<link rel = "canonical" href = "http://abc.com/" />

列印頁面