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/" />

打印页面