HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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() 与 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/" />
❮ 上一节 下一节 ❯