• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

如何在JavaScript中更改 URL:重定向

如何在JavaScript中更改 URL:重定向  第1张

在这篇快速文章中,我们将讨论如何通过重定向来更改 javascript 中的 URL。我们将介绍几种可用于执行 JavaScript 重定向的不同方法。

javaScript 是 Web 的核心技术之一。大多数网站都使用它,所有现代网络浏览器都支持它,无需插件。在本系列中,我们将讨论可能对您的日常 JavaScript 开发有所帮助的不同提示和技巧。

当您使用 JavaScript 时,您经常需要将用户重定向到不同的页面。JavaScript 提供了不同的方法来做到这一点。

今天,我们将讨论如何在 vanilla JavaScript 和jquery库中执行 URL 重定向。

如何在 Vanilla JavaScript 中更改 URL

在本节中,我们将介绍 JavaScript 提供的不同内置方法来实现 URL 重定向。实际上,JavaScript 提供了location对象,窗口对象的一部分,它允许您执行不同的 URL 相关操作。

location.href方法_

该location.href方法是执行 JavaScript 重定向的最流行的方法之一。如果您尝试获取 的值location.href,它将返回当前 URL 的值。同样,您也可以使用它来设置新的 URL,然后用户将被重定向到该 URL。

让我们看一下下面的例子。

console.log(location.href);
// prints the current URL
location.href = 'https://www.weixiaolive.com';
// redirects the user to https://www.weixiaolive.com

如您所见,使用该location.href方法重定向用户相当容易。由于location对象是对象的一部分window,所以上面的代码片段也可以写成:

window.location.href = 'https://www.weixiaolive.com';

所以通过这种方式,您可以使用该location.href方法更改 URL 并将用户重定向到不同的网页。

location.assign方法_

该location.assign方法的工作方式与该方法非常相似,location.href并允许您将用户重定向到不同的网页。

让我们通过以下示例快速了解它是如何工作的。

location.assign('https://www.weixiaolive.com');

如您所见,它非常简单。您只需在assign方法的第一个参数中传递 URL,它会将用户重定向到该 URL。重要的是要注意该assign方法维护History对象的状态。我们将在下一节中详细讨论这一点。

location.replace方法_

您还可以使用该location.replace方法执行 JavaScript 重定向。该location.replace方法允许您将当前 URL 替换为不同的 URL 以执行重定向。

让我们看看它是如何与以下示例一起工作的。

location.replace('https://www.weixiaolive.com');

尽管该location.replace方法看起来与将用户重定向到不同 URL 的方法非常相似location.href,location.assign但它们之间有一个重要的区别。当您使用该location.replace方法时,当前页面不会保存在会话中,它实际上是从 JavaScriptHistory对象中删除的。因此,用户将无法使用后退按钮导航到它。

让我们尝试通过以下示例来理解它。

// let’s assume that a user is browsing https://www.weixiaolive.com/
// a user is redirected to a different page with the location.href method
location.href = 'https://www.weixiaolive.com/';
// a user is redirected to a different page with the location.replace method
location.replace('https://www.weixiaolive.com/');

在上面的示例中,我们假设用户正在浏览https://www.weixiaolive.com/en网页。接下来,我们使用该location.href方法将用户重定向到https://design.www.weixiaolive.com网页。最后,我们使用该location.replace方法将用户重定向到https://business.www.weixiaolive.com网页。现在,如果用户单击后退按钮,它将返回https://www.weixiaolive.com/en而不是https://design.www.weixiaolive.com,因为我们已经使用了该location.replace方法,并且它实际上已将当前 URL 替换https://business.www.weixiaolive.com为History对象中的。

location.replace因此,在使用它们之前,您应该了解与其他方法之间的区别。您不能互换使用它们,因为该location.replace方法会改变 JavaScriptHistory对象的状态。因此,如果你想保留History对象的状态,你应该使用其他重定向用户的方法。

如何使用 jQuery 执行 URL 重定向

尽管 vanilla JavaScript 在 URL 重定向方面提供了足够多的选项,但如果您仍然想知道如何使用 jQuery 库进行此操作,我们将在本节中快速完成它。

在 jQuery 中,您可以使用该attr方法执行重定向,如以下代码段所示。

$(location).attr('href', 'https://www.weixiaolive.com/');

如您所见,使用 jQuery 重定向用户相当容易!

以上就是执行 JavaScript 重定向的不同方式。至此,我们也到了这篇快速文章的结尾。

结论

今天,我们讨论了如何实现 JavaScript 重定向。我们讨论了可用于执行 JavaScript 重定向的不同方法以及一些示例。

文章目录
  • 如何在 Vanilla JavaScript 中更改 URL
    • location.href方法_
    • location.assign方法_
    • location.replace方法_
  • 如何使用 jQuery 执行 URL 重定向
  • 结论