ES6 - 页面重定向

ES6 页面重定向

重定向是一种将用户和搜索引擎从原来请求的URL发送到不同URL的方式。页面重定向是一种自动将网页重定向到另一个网页的方式。重定向的页面通常位于同一网站上，或者可以位于不同的网站或Web服务器上。

JavaScript页面重定向

window.location和window.location.href

在JavaScript中，您可以使用许多方法将网页重定向到另一个网页。几乎所有的方法都与window.location对象有关，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（）方法，因为它在浏览器中加载一个新的Document。

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”meta标签到你的网站主管部分，因为搜索引擎不会分析JavaScript来检查重定向。

以下是相同的语法。

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