数据结构
网络
关系数据库管理系统 (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>运行上述代码后，用户可以观察到页面是如何从浏览器的缓存中加载的，并且没有向服务器发送请求来加载新页面（前提是用户浏览器缓存中存在旧版本的页面）。
使用 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+ 次浏览
