JavaScript 重定向

2025年3月17日 | 阅读 3 分钟

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

通常,搜索引擎不会分析JavaScript来检查重定向。因此,如果需要将 URL 转发通知搜索引擎 (SEO),我们需要在网页的 head 部分添加 rel = "canonical" 标签。

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

window.location 和 window.location.href

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

它可以用于获取当前 URL 的地址或 Web 地址。window.location 对象可以不加 window 前缀而写入。

location.replace()

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

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

语法

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

示例 1

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

在此示例中,有一个按钮会将访问者重定向到 'TpointTech.com'。我们必须单击按钮才能导航到相应的链接。

输出

执行上述代码后,输出将是 -

JavaScript redirect

单击给定按钮后,输出将是 -

JavaScript redirect

示例 2

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

输出

执行上述代码后,输出将是 -

JavaScript redirect

五秒间隔后,输出将是 -

JavaScript redirect

Example3

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

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

输出

执行上述代码后,输出将是 -

JavaScript redirect

单击给定按钮后,输出将是 -

JavaScript redirect

如果我们尝试使用相同的位置再次打开前一个文档,我们会看到它已被新文档替换。