数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 JavaScript 重定向我的网页？
您可能遇到过这种情况：点击某个 URL 跳转到特定页面，但却被内部重定向到另一个页面。这就是页面重定向的原因。重定向是指对一个页面的 HTTP 请求立即导航到另一个页面。这与简单地重新加载网站不同。使用客户端的原生 JavaScript 进行网页重定向非常简单。因此，在本文中，我们将学习如何使用原生 JavaScript 重定向网页以及何时使用特定方法。
使用原生 JavaScript 实现网页重定向有很多方法，但本文将介绍一些最知名、最有效和最典型的 JavaScript 重定向方法。
使用replace()方法
使用window.location.href进行重定向
使用 window 的assign()方法
使用 replace() 方法
Location 接口的replace()方法用给定 URL 中的资源替换当前资源。replace()方法和assign()方法的区别在于，使用replace()方法后，当前页面不会保留在会话历史记录中，用户无法通过按后退按钮返回到该页面。
语法
用户可以按照以下语法使用window.location.replace()方法。
window.location.replace("url");
location.replace(“url”); // without using window object参数
url − 此参数表示用户将被重定向到的网页。
示例
以下示例演示了如何在 JavaScript 中使用window.location.replace()方法重定向网页。
我们也可以将window.location.replace替换为location.replace，因为两者没有区别。两者具有相同的结果（在浏览器中，window 对象是全局对象）。我们可以使用 window 对象的属性访问全局变量或函数。
脚本标签可以放置在 HTML 的 head 部分或 body 部分，具体取决于您希望 JavaScript 何时加载。通常，JavaScript 代码可以包含在文档的 head 部分中，并与 HTML 文档的主体文本分开。
<html>
<head>
<title>Example- Redirecting web page with JavaScript</title>
</head>
<body>
<h2>Redirecting web page with JavaScript</h2>
<p>Click the following button, to get redirected Using the replace() function</p>
<input type="button" value="Redirect Me" title="Redirect" onclick="Redirect()"/>
<script>
function Redirect() {
window.location.replace("https://tutorialspoint.com");
}
</script>
</body>
</html>运行上述代码后，用户可以看到他们是如何使用replace()函数重定向到 tutorials point 首页的，但无法使用后退按钮返回到原始页面。
使用 window.location.href 进行重定向
在这种方法中，我们将使用最常用的 JavaScript 技术来重定向 URL，这只需更改 location 的 href 属性即可实现。这是一个属性，它将告知您浏览器当前的 URL 位置，而不是方法。如果属性的值发生更改，页面将重新加载。
您应该记住，window.location.href并不总是向服务器发送请求，它从浏览器的缓存中加载页面。如果您的缓存中存在旧版本的页面，它将重定向到该页面，而不是从服务器加载新页面。
语法
window.location.href = "http://newURL.com";
示例
用户可以学习以下示例来重定向他们的页面。
<html>
<head>
<title>Example- Redirecting web page with JavaScript</title>
</head>
<body>
<h2>Redirecting web page with JavaScript</h2>
<p>Click the following button, to get redirected Using the replace() function</p>
<input type="button" value="Redirect Me" title="Redirect" onclick="Redirect()"/>
<script>
function Redirect() {
window.location.replace("https://tutorialspoint.com");
}
</script>
</body>
</html>运行上述代码后，用户可以观察到页面是如何从浏览器缓存中加载的，并且没有向服务器发送请求来通过更改 href 属性加载新页面（前提是用户浏览器缓存中存在旧版本的页面）。
使用 Window assign() 方法
可以使用window.location.assign()函数使用 JavaScript 重定向网页。此过程会重定向到新添加的 URL 并将其添加到历史堆栈。
现在的问题是应该使用replace()方法还是 assign 方法。两者之间的实际区别在于，replace()方法会从文档历史记录中删除当前文档的 URL，因此无法使用“后退”按钮返回到原始文档。
因此，如果您想加载新文档并为用户提供从重定向的原始页面返回的选项，请使用assign()方法。
语法
window.location.assign ( "url" );
示例
在下面的示例中，我们使用了window.location.assign()方法重定向到 tutorials point 的首页
<html>
<head>
<title>Example - Redirecting web page with JavaScript</title>
</head>
<body>
<h2>Redirecting web page with JavaScript</h2>
<p>Click the following button, to get redirected using the window assign() function.</p>
<input type="button" value="Redirect Me" title="Redirect" onclick="Redirect()">
<script>
function Redirect() {
window.location.assign("https://tutorialspoint.com");
}
</script>
</body>
</html>单击按钮后，用户可以看到网页已被重定向，并且通过按后退按钮，他们能够返回到他们开始的原始页面，这与replace()方法不同，在replace()方法中，我们无法使用后退按钮返回到上一页。
结论
在本文中，我们使用了三种最常见、最有效的方法来使用原生 JavaScript 将用户重定向到不同的网页。所有方法都能正常工作，但应根据用户的需求使用。本文未介绍一些额外的使用方法，例如window.navigate()，因为它们是特定于某些 Web 浏览器的，因此这些方法在其他 Web 浏览器中可能无法正常运行。
4K+ 次浏览
