重定向是将搜索引擎和用户从原始URL发送到不同URL的机制。重定向的页面可以位于同一服务器上,也可以位于不同服务器上。它还可以位于同一个网站或不同的网站上。有时候,当我们点击一个URL时,我们会被重定向到另一个URL。这是由于页面重定向引起的。这与刷新页面不同。

一般来说,搜索引擎不会分析JavaScript以检查重定向。因此,如果需要通知搜索引擎(SEO)关于URL重定向,我们需要在网页的头部部分添加rel = "canonical"标签。

<link rel="canonical" href="https://www.javatiku.cn/" />

有多种方法用于执行页面重定向,但location.hreflocation.replace()是广泛使用的。在JavaScript中,页面重定向非常简单。

window.location 和 window.location.href

window.location对象是窗口对象的属性。有多种方法可以重定向一个网页,几乎所有方法都与window.location对象有关。

它可以用于获取当前URL或Web地址。window.location对象可以在不添加窗口前缀的情况下编写。

location.replace()

这是最常用的window.location对象之一。它用于用新文档替换原始文档。

通过这个方法,我们可以传递一个新的URL,然后它将执行一个HTTP重定向。这与href不同,因为它会从文档的历史记录中删除当前文档,因此无法导航回原始文档。

语法

window.location.replace("new URL");

现在,让我们通过一些示例来理解页面重定向。

示例1

这是一个客户端页面重定向的简单示例。要重定向页面,我们只需在脚本部分中写一个语句。

在这个示例中,有一个按钮,点击它将重定向访问者到javaTiku.cn。我们必须点击按钮以跳转到适当的链接。

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    function page_redirect() {
      window.location = "https://www.javatiku.cn/";
    }
  </script>
</head>
<body>
  <h2>这是页面重定向的示例</h2>
  <p>点击下面的按钮查看效果。</p>
  <form>
    <input type="button" value="重定向" onclick="page_redirect()" />
  </form>
</body>
</html>

输出

执行以上代码后,输出将如下所示:

1.png

点击给定按钮后,输出将如下所示:

web.png

示例2

在这个示例中,我们使用setTimeout()方法自动将用户重定向到适当的链接。加载新页面需要一些时间。setTimeout()方法在给定的时间间隔后执行另一个函数。

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    function page_redirect() {
      window.location = "https://www.javatiku.cn/";
    }
    setTimeout('page_redirect()', 5000);
  </script>
</head>
<body>
  <h2>5秒后,您将被重定向到另一个页面。</h2>
  <p>等待5秒以查看效果。</p>
</body>
</html>

输出

执行以上代码后,输出将如下所示:

2.png

5秒后,输出将如下所示:

web.png

示例3

在这个示例中,我们使用replace()方法进行页面重定向。replace()方法将使用新文档替换当前文档。

这里有一个HTML按钮,需要点击它以用新文档替换当前文档。

<!DOCTYPE html>
<html>
<head>
  <script>
    function page_redirect() {
      location.replace("https://www.javatiku.cn")
    }
  </script>
</head>
<body>
  <h2>使用replace()进行页面重定向的示例</h2>
  <p>使用replace(),当前文档将被新文档替换。</p>
  <p>点击以下按钮查看效果。</p>
  <button onclick="page_redirect()">替换</button>
</body>
</html>

输出

执行以上代码后,输出将如下所示:

3.png

点击给定按钮后,输出将如下所示:

web.png

如果尝试再次打开先前的文档,您会看到它将被新文档替换。

标签: js, JavaScript, JavaScript语言, JavaScript开发, JavaScript语法, JavaScript脚本, JavaScript教程, JavaScript入门, JavaScript入门教程, JavaScript进阶, JavaScript宝典, JavaScript学习, JavaScript指南, JavaScript大全