ES6 - 页面重定向

页面重定向（Page redirection）是将用户和搜索引擎从他们最初请求的 URL 自动发送到另一个 URL 的过程。这个新 URL 可以在同一个网站上，也可以是外部网站。

使用 JavaScript 进行客户端重定向

在 JavaScript 中，客户端重定向主要通过 window.location 对象处理。这个对象提供了关于当前 URL 的信息以及导航到新 URL 的方法。

`window.location.href` 属性

最直接的重定向方式是给 window.location.href 或 window.location 赋一个新的 URL 字符串。两者效果相同：浏览器会导航到新的 URL，并且浏览器的历史记录中会添加一个条目，允许用户点击“后退”按钮。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Redirect Example</title>
  <script>
    function navigateToExample() {
      window.location.href = "https://www.example.com";
    }
  </script>
</head>
<body>
  <button onclick="navigateToExample()">Go to Example.com</button>
</body>
</html>

在这个示例中，点击按钮将用户重定向到 https://www.example.com。

`window.location.assign()` 方法

location.assign() 方法在指定的 URL 加载一个新的文档。类似于给 window.location.href 赋值，此方法也会在浏览器历史记录中创建一个条目。

语法:

window.location.assign("https://www.new-url.com");

`window.location.replace()` 方法

location.replace() 方法用指定 URL 的新文档替换当前文档。与 assign() 或 href 赋值的关键区别在于，replace() 会从文档历史记录中移除当前 URL。这意味着用户无法使用浏览器的“后退”按钮返回到原始页面。

语法:

window.location.replace("https://www.another-url.com");

`assign()` 与 `replace()`

如果你希望原始页面保留在浏览器历史记录中，允许用户后退，则使用 location.assign() 或 window.location.href。如果你希望防止用户使用“后退”按钮返回原始页面，例如在表单提交或登录过程之后，则使用 location.replace()。

`window.location.reload()` 方法

location.reload() 方法重新加载当前文档。默认情况下，它会从浏览器缓存中重新加载页面。要强制从服务器重新加载，可以传入 true 作为参数（尽管现在这种方式不太常见，且浏览器行为可能不同）。

语法:

// 从缓存重新加载 (默认)
window.location.reload();

// 尝试强制从服务器重新加载 (谨慎使用)
// window.location.reload(true); // 在某些上下文中已弃用，请检查浏览器兼容性

已废弃的方法

window.navigate(): 此方法是 Internet Explorer 特有的，现已废弃。由于缺乏跨浏览器兼容性和现代替代方案，不应在现代 Web 开发中使用。

重定向与搜索引擎优化 (SEO)

如果主要目标是通知搜索引擎永久性的 URL 更改，客户端 JavaScript 重定向通常不适合 SEO。搜索引擎可能不会总是执行 JavaScript，因此可能无法识别重定向。对于永久重定向，首选服务器端 301 重定向。

如果你必须使用 JavaScript 进行重定向，并且希望向搜索引擎提供提示，可以在 HTML 文档的 <head> 中使用 rel="canonical" 链接标签。这个标签建议内容的首选 URL。

语法:

<link rel="canonical" href="https://www.preferred-url.com/" />

然而，rel="canonical" 是一种建议，而不是像 301 重定向那样的指令。服务器端重定向对于 SEO 目的来说更健壮。

ES6 - 页面重定向

ES6 - 页面重定向

使用 JavaScript 进行客户端重定向

window.location.href 属性

示例:

window.location.assign() 方法

语法:

window.location.replace() 方法

语法:

assign() 与 replace()

window.location.reload() 方法

语法:

已废弃的方法

重定向与搜索引擎优化 (SEO)

语法:

更多资源:

`window.location.href` 属性

`window.location.assign()` 方法

`window.location.replace()` 方法

`assign()` 与 `replace()`

`window.location.reload()` 方法