JavaScript 重定向

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

通常，搜索引擎不会分析JavaScript以检查重定向。因此，如果需要通知搜索引擎（SEO）关于URL转发，我们需要在网页的头部部分添加 rel = “canonical” 标签。

<link rel = "canonical" href = "https://www.javatpoint.com/"  />

有几种方法可用于执行页面重定向，但是 location.href 和 location.replace() 是广泛使用的方法。在JavaScript中很容易实现页面重定向。

window.location和window.location.href

window.location 对象是window对象的属性。有几种方法可以重定向网页，几乎所有的方法都与window.location对象相关。

它可用于获取当前URL地址或网址。window.location对象可以不加window前缀来编写。

location.replace()

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

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

语法

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

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

示例1

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

在此示例中，有一个按钮，点击该按钮将访问者重定向到 ‘javaTpoint.com’ 。我们必须点击按钮才能导航到适当的链接。

<html>
<head>
<script type = "text/javascript">
function page_redirect(){
window.location = "https://www.javatpoint.com/";
}
</script>
</head>

<body>
<h2> This is an example of the page redirection </h2>
<p> Click the following button to see the effect. </p>

<form>
<input type = "button" value = "Redirect" onclick = "page_redirect()" />
</form>

</body>
</html>

输出

在以上代码执行后，输出结果将是 –

JavaScript 重定向

点击给定的按钮后，输出结果将如下：

JavaScript 重定向

示例2

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

<html>
<head>
<script type = "text/javascript">
function page_redirect() {
window.location = "https://www.javatpoint.com/";
}
setTimeout('page_redirect()', 5000);
</script>
</head>

<body>
<h2> After 5 seconds, you will redirected to another page. </h2>
<p> Wait for 5 seconds to see the effect. </p>
</body>
</html>

输出

执行以上代码后，输出将为-

JavaScript 重定向

五秒钟后，输出结果将是 –

JavaScript 重定向

示例3

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

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

<!DOCTYPE html>
<html>
<head>
<script>
function page_redirect() {
  location.replace("https://www.javatpoint.com")
}
</script>
</head>
<body>

<h2> Example of redirecting a page using replace() </h2>
<p> Using the replace() the currct document will replace with new one. </p>
<p> Click the following button to see the effect. </p>
<button onclick = "page_redirect()"> Replace </button>
</body>
</html>

输出

上述代码执行后，输出结果为 –

JavaScript 重定向