数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律如何在 JavaScript 中强制页面加载另一个页面？
在 JavaScript 中，我们可以使用 window.location 对象来强制页面加载另一个页面。我们可以使用 location 对象来设置新页面的 URL。有不同的方法 - window.location.href 属性、window.location.assign() 和 window.location.replace() 方法，可以使用 location 对象来设置新页面的 URL。在本教程中，我们将详细讨论每个属性和方法。
Window.location.replace
第一种方法是使用window.location.href 属性。此属性包含有关页面当前 URL 的信息，可用于将用户重定向到新页面。
语法
window.location.href = "new_url";
用户将立即重定向到指定的 URL (new_url)。
为了在经过指定的时间后重定向用户，我们还可以指定 setTimout 函数，该函数允许用户在函数中指定的时间后重定向到源 URL。
setTimeout(function() {
window.location.href = "https://tutorialspoint.com";
}, 3000);
以上示例将在 3 秒后将用户重定向到给定的 URL (https://tutorialspoint.com)。
示例
在此示例中，我们定义了一个按钮（加载），单击该按钮时会呈现函数 forceLoad()。在 forceLoad() 函数中，我们使用 window.location.href 属性重新加载新页面 - tutorialspoint 主页。
<html>
<body>
<h2>Forced Load page using window.location.href property</h2>
<p>Click on the below button to force reload new page</p>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
window.location.href = "https://tutorialspoint.com";
}
</script>
</body>
</html>
window.location.replace
强制重定向到另一个页面的另一种方法是使用 window.location.replace 属性。此方法有助于用另一个页面替换浏览器历史记录中的当前页面，但在此处用户将无法返回到原始页面。
语法
window.location.replace("new_url");
在此语法中，我们将具有与 window.location.href 示例相同的效果，但这里的区别在于用户的当前页面不会存储在浏览器的历史记录中。
示例
在此示例中，我们定义了一个按钮（加载），单击该按钮时会呈现函数 forceLoad()。forceLoad() 函数呈现一个 JavaScript 方法 - location.replace()，该方法用函数中提供的 URL 中的页面替换当前源。
请注意，导航发生后，它不允许用户导航回上一个页面，而在 javascript 中使用 location.assign() 属性的情况下则可以。
<html>
<body>
<h2>Forced Load page using window.location.replace() method</h2>
<p>Click below button force reload new page</p>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
window.location.replace("https://tutorialspoint.com");
}
</script>
</body>
</html>
window.location.assign
在此方法中，我们使用 window.location.assign 方法，该方法用于将新页面添加到浏览器的历史记录中，允许用户返回到用户浏览的原始页面。
语法
window.location.assign("new_url");
在此语法中，它将具有与 window.location 示例相同的效果，但这里的区别在于用户的当前页面将存储在浏览器的历史记录中。
示例
在此示例中，我们定义了一个按钮（加载），单击该按钮时会呈现函数 forceLoad()。forceLoad() 函数呈现一个 JavaScript 方法 - location.assign()，该方法导致窗口加载并显示当前 URL 中指定的文档或页面。导航发生后，它还允许用户通过按浏览器的“后退”按钮，借助名为 Location.assign() 的属性返回上一个页面。
<html>
<body>
<h2>Window.location.assign() method</h2>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
location.assign("https://tutorialspoint.com");
}
</script>
</body>
</html>
window.location、window.location.replace 和 window.location.assign 之间的区别
| 依据 | window.location.href | window.location.assign | window.location.replace |
|---|---|---|---|
| 定义 | 它获取当前 URL 并重定向到 URL 中指定的文档或页面。 | 它加载并显示 URL 中指定的文档或页面。 | 它用 URL 中指定的页面替换当前页面。 |
| 浏览器历史记录 | 它不会将新加载的文档或页面添加到浏览器历史记录中。 | 它将新加载的文档或页面保存在浏览器历史记录中。 | 它还将新加载的文档或页面保存在浏览器历史记录中。 |
| 后退 | 它允许用户返回到上一个页面/文档。 | 它还允许用户返回到上一个页面。 | 它不允许用户返回到上一个页面。 |
window.location.href 属性、window.location.replace() 和 window.location.assign() 方法之间的主要区别在于它们如何处理浏览器的历史记录。如果我们谈论 location.replace 方法，它将替换当前 URL 并且不允许用户返回到上一个页面。location.assign 方法将加载一个新文档并将其添加到浏览器的历史记录中，同时允许用户返回到先前打开的页面。最后，window.location 方法与 location.assign 相同，因为它也将新文档添加到浏览器的历史记录中。
结论
总结本文，在 JavaScript 中强制将新页面加载到另一个页面是一项简单的任务，可以使用多种 JavaScript 方法来完成，即 window.location.href 属性、window.location.replace() 方法或 window.location.assign() 方法。所有这些方法都帮助开发人员能够创建动态且交互式的网页，从而有助于创建更好的用户交互并增强用户应用程序体验。
6K+ 次查看
