如何改变JavaScript中的URL。重定向

·  阅读 485
如何改变JavaScript中的URL。重定向

在这篇快速文章中,我们将讨论如何通过重定向来改变JavaScript中的URL。我们将通过几个不同的方法,你可以用来执行JavaScript重定向。

JavaScript是网络的核心技术之一。大多数网站都使用它,而且所有现代网络浏览器都支持它,不需要插件。在这个系列中,我们将讨论不同的提示和技巧,这些提示和技巧可能有助于你的日常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://code.tutsplus.com';
// redirects the user to https://code.tutsplus.com
复制代码

正如你所看到的,用location.href 方法来重定向用户是相当容易的。由于location 对象是window 对象的一部分,上面的片段也可以写成。

window.location.href = 'https://code.tutsplus.com';
复制代码

因此,通过这种方式,你可以使用location.href 方法来改变URL,将用户重定向到不同的网页。

location.assign 方法

location.assign 方法的工作原理与location.href 方法非常相似,它允许你将用户重定向到一个不同的网页。

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

location.assign('https://code.tutsplus.com');
复制代码

正如你所看到的,它是非常简单明了的。你只需要在assign 方法的第一个参数中传递URL,它就会把用户重定向到该URL。值得注意的是,assign 方法维护了History 对象的状态。我们将在下一节中详细讨论这个问题。

location.replace 方法

你也可以使用location.replace 方法来执行JavaScript重定向。location.replace 方法允许你用一个不同的URL替换当前的URL来执行重定向。

让我们通过下面的例子来看看它是如何工作的。

location.replace('https://code.tutsplus.com');
复制代码

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

让我们试着用下面的例子来理解它。

// let’s assume that a user is browsing https://code.tutsplus.com

// a user is redirected to a different page with the location.href method
location.href = 'https://design.tutsplus.com';

// a user is redirected to a different page with the location.replace method
location.replace('https://business.tutsplus.com');
复制代码

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

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

如何用jQuery执行URL重定向

尽管vanilla JavaScript在URL重定向方面提供了足够多的选择,但如果你还在寻找如何用jQuery库来进行重定向,我们将在本节中快速浏览一下。

在jQuery中,你可以使用attr 方法来执行重定向,如下面的片段所示。

$(location).attr('href', 'https://design.tutsplus.com');
复制代码

正如你所看到的,用jQuery来重定向用户是相当容易的!

所以这就是你可以用来执行JavaScript重定向的不同方法。就这样,我们也达到了这篇快速文章的终点。

总结

今天,我们讨论了如何实现JavaScript重定向的问题。我们讨论了可以用来执行JavaScript重定向的不同方法,并举了一些例子。

分类:
前端
收藏成功!
已添加到「」, 点击更改