Javascript

Javascript 中如何重定向到另一个网页

Posted by cl9000 on June 07, 2021

创造力是智力的乐趣。——<阿尔伯特·爱因斯坦>

介绍

通常，我们需要重定向用户到另一个网站或同一网站上的另一个网页。有几种重定向方法，包括 JavaScript 重定向、服务器端重定向和 HTML 元刷新重定向。重定向基本上是一种将用户发送到另一个 URL 地址的机制。

使用重定向的动机各不相同，在大多数情况下，这是因为:

  • 由于任何原因，您转移到了另一个域，因此当用户访问旧域上的内容时，您可以将用户重定向到新域。
  • 您有多个页面，它们的内容会根据位置、语言、浏览器或将用户重定向到最适合的页面的其他因素而变化。
  • 您将未经身份验证或未经授权的用户对资源的请求重定向到登录页面。
  • 您将用户发送到与当前站点内容相关的其他页面。

所有这些实际上都是通过包含 URL 信息的 Location 对象实现的。有几种方法可以做到这一点，通过操作 Location 对象的不同属性。
在本教程中，我们将看看如何用 JavaScript 将用户重定向到不同的网页，以及如何减少潜在的负面 SEO 影响:

window.location 属性

window.location 对象表示window/user的当前位置，或者更确切地说URL。从技术上讲，它是一个只读属性，但是，我们可以通过给它的属性赋新值(DOMStrings)来操作它。windows.location对象的 windows前缀可以省略，因为它按层次结构位于作用域的顶部。

使用 location.href 重定向用户

location.href属性表示当前 URL 为字符串。改变 href 属性也会自动引导用户到新的 href 值。改变 href 属性就像给它赋一个新值一样简单:

1
location.href = "https://cl9000.github.io/";

注意：功能等效的代码行是：

1
windows.location = "https://cl9000.github.io";

值得一提的是，你可以将用户重定向到一个域其他比他们目前是在使用这种方法的领域，但是，安全问题可以从这个引起的，所以做法应该应尽量避免使用。

重定向通常与某种事件相关，例如按下将用户重定向到不同网页的按钮，或其他事件，例如用户在网站上执行某些操作（在社交媒体上上传图像，然后他们“例如，重新重定向到该帖子）。让我们编写一个简单的函数，通过单击按钮重定向用户：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Redirection</title>
    <script type = "text/javascript">
        function Redirect() {
         window.location.href = "https://stackabuse.com/";
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Redirect()"/>
</body>
</html>

使用 location.assign() 重定向用户

location.assign(url) 方法加载提供的资源 url ，并将其显示在 window. 与设置 href属性相比，这实际上是重定向用户的首选方法，因为它还会检查所提供的安全性，url如果它不是安全目的地，则会抛出异常。
另一个好处是它在浏览器的历史记录中创建了一个新条目，允许用户根据需要优雅地“返回”。
还值得注意的是 location.assign() 不允许跨域重定向。您只能重定向到进行的同一个域，这对安全性有积极影响。

除此之外，它的使用方式与为 分配新值的方式大致相同 location.href。让我们重写我们的页面以使用该 assign()函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Assigning</title>
    <script type = "text/javascript">
        function Assign() {
         window.location.assign("https://stackabuse.com/");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Assign()" />
</body>
</html>

使用 location.replace() 重定向用户

replace(url) 方法可用于将 上的当前资源替换为 从window 加载的资源 url。它不会真正重定向用户，也不会存储在浏览器的历史记录中。存在与 assign()方法相同的安全约束，如果您想用另一个页面替换内容，这使其成为一种理想的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Replacing</title>
    <script type = "text/javascript">
        function Replace() {
         window.location.Replace("https://stackabuse.com");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Replace()" />
</body>
</html>

还值得注意的是，assign()方法有一个严重的潜在问题。如果用户要返回到自动运行 assign() 方法的页面，他们将被重定向回他们尝试从返回的页面。然后他们会通过 Back Button 进入一个“返回”循环，但由于 assign() 方法而被重定向到另一个页面。

如果您正在使用 assign()，请确保它不会在页面上自动调用，并且它的调用需要用户的操作，例如在按下按钮时调用它。如果没有 - 使用 location.replace()。

此外，location.replace() 最接近 HTTP 重定向，因为原始链接不会添加到浏览器的历史记录中。

安全影响和副作用

提到的安全性适用于上述所有方法，它指的是以下几个方面：

  • 如果这是调用此方法的脚本的来源是不一样的当前页面的起源-这将被视为一个安全违规，抛出：DOMException 的 SECURITY_ERROR 类型将被抛出。也就是说，嵌入到您自己页面中的外部库和服务将无法重定向用户。
  • 如果存储的 URL 无效，DOMException则会抛出 a。
  • 如果您将用户重定向到他们所在域以外的域，CORS可能会启动并阻止它。

由于人为设计问题而可能发生的一些可能的副作用是：

  • 当重定向（除了replace()）发生得太快（即不到 3 秒）时，它可能会破坏浏览器上的后退按钮。这意味着每次您尝试返回上一页时，重定向几乎会立即再次发生，从而造成无限循环。
  • 它可以被认为是不推荐的 Doorway Page（即为 SEO 索引操作创建的页面）
  • 计划和使用不当的重定向会导致链式重定向，即在两个或多个页面之间重定向。

对 SEO 的影响

对 SEO 的影响
有许多影响因素SEO，很多人实际上并没有公开的，以免他们滥用。不过，可以肯定的是，优化不当的代码会对 SEO 产生负面影响。它可能导致加载时间过长、重定向链甚至循环。许多网络爬虫不会执行会对页面排名产生负面影响的 JavaScript 代码。

克服这些问题的最佳方法可能是：

  • 在服务器端使用任何重定向状态码(301..308)正确地发出一个 HTTP 重定向，或者对你不再想托管或重定向到的页面发出 404。

  • 通过在<head></head>部分添加 <link rel="canonical" href="https://original_link"/> 来通知搜索引擎有重复的页面。这比在服务器端做任何额外的工作更容易实现，但请记住，不是所有的 web爬虫都会喜欢它。

参考

关注【公众号】，了解更多。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
Javascript
FRIENDS