JavaScript教程-JavaScript重定向
重定向是将搜索引擎和用户从原始URL发送到不同URL的机制。重定向的页面可以位于同一服务器上,也可以位于不同服务器上。它还可以位于同一个网站或不同的网站上。有时候,当我们点击一个URL时,我们会被重定向到另一个URL。这是由于页面重定向引起的。这与刷新页面不同。
一般来说,搜索引擎不会分析JavaScript以检查重定向。因此,如果需要通知搜索引擎(SEO)关于URL重定向,我们需要在网页的头部部分添加rel = "canonical"标签。
<link rel="canonical" href="https://www.javatiku.cn/" />
有多种方法用于执行页面重定向,但location.href和location.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>
输出
执行以上代码后,输出将如下所示:
点击给定按钮后,输出将如下所示:
示例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>
输出
执行以上代码后,输出将如下所示:
5秒后,输出将如下所示:
示例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>
输出
执行以上代码后,输出将如下所示:
点击给定按钮后,输出将如下所示:
如果尝试再次打开先前的文档,您会看到它将被新文档替换。