如何重定向到另一个网页？

在开始讨论之前，让我们明确一点，jQuery是一种用于DOM操作的JavaScript库，因此不应该使用jQuery来进行页面重定向。

尽管在较旧的浏览器版本中jQuery可能运行没有大问题，但我们不在这些版本上积极测试jQuery，并且一般不会修复在这些版本中出现的错误。 —— 摘自 https://jquery.com/browser-support/

jQuery并不是向后兼容的最终解决方案。使用纯JavaScript的解决方案在所有浏览器上都能正常工作，而且这些方法已经成为标准，因此不需要任何额外的库来解决跨浏览器支持问题。

通过纯JavaScript实现页面重定向

以下是一个使用纯JavaScript进行页面重定向的示例，在3秒之后将页面重定向到 Google：

<!doctype html>
<html>
  <head>
    <title>example</title>
  </head>
  <body>
    <p>你将很快被重定向到Google。</p>
    <script>
      setTimeout(function () {
        window.location.href = 'http://www.google.com' // 将被重定向的URL
      }, 3000) // 数字越大，延迟时间就越长
    </script>
  </body>
</html>

不同的重定向方法

我们可以通过多种方式进行页面重定向：

window.location.href = 'url' // 模拟正常导航到一个新页面
window.location.replace('url') // 从历史记录中移除当前URL并替换为新的URL
window.location.assign('url') // 将新的URL加入历史记录栈并重定向到这个URL

window.history.back() // 模拟后退按钮点击
window.history.go(-1) // 模拟后退按钮点击
window.history.back(-1) // 模拟后退按钮点击
window.navigate('page.html') // 等同于window.location="url"

其中，使用replace方法时，后退按钮不会返回到重定向页面，就像它从未进入历史记录一样。如果希望用户能够返回到重定向页面，应该使用window.location.href或window.location.assign。不过需要注意，如果使用了这两种方法，在用户返回重定向页面时会再次被重定向。因此，在选择重定向方法时需要考虑这种情况。如果页面只在用户执行某个操作时进行重定向，那么保持页面在历史记录中是可以的；但如果是自动重定向，则应该使用replace，以便用户能够顺利使用后退按钮而不被强制重定向。

使用META标签进行页面重定向

我们也可以通过META标签实现页面重定向。

META刷新

<meta http-equiv="refresh" content="0;url=http://evil.example/" />

META位置

<meta http-equiv="location" content="URL=http://evil.example" />

BASE劫持

<base href="http://evil.example/" />

更多的页面重定向方法可以参考这个页面（没有一个依赖于jQuery）：

https://code.google.com/p/html5security/wiki/RedirectionMethods

重定向的注意事项

需要指出，用户不喜欢被随机重定向。请在绝对必要时才执行重定向。如果随意重定向用户，他们可能再也不愿访问你的网站。

潜在的风险

假设你的网站被报告为恶意站点，那么当用户点击你的网站链接时，浏览器可能会警告他们你的网站存在风险。此外，搜索引擎可能会根据用户报告的糟糕体验降低你的网站排名。

请查阅Google站长指南中的重定向相关部分：https://support.google.com/webmasters/answer/2721217?hl=zh-Hans&ref_topic=6001971

一个有趣的小页面

下面是一个有趣的小页面，在3秒后将用户踢出页面。

<!doctype html>
<html>
  <head>
    <title>Go Away</title>
  </head>
  <body>
    <h1>走开</h1>
    <script>
      setTimeout(function () {
        window.history.back()
      }, 3000)
    </script>
  </body>
</html>

如果将两个页面示例结合在一起，你会得到一个不断重定向的循环，确保用户永远不会再想访问你的站点。