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://www.tutorialspoint.com";
}, 3000);
上面的例子将在3秒过后将用户重定向到给定的URLhttps://www.tutorialspoint.com
例子
在这个例子中,我们定义了一个按钮(Load),当点击它时,会显示一个函数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://www.tutorialspoint.com";
}
</script>
</body>
</html>
window.location.replace
另一种强行重定向到另一个页面的方法是使用window.location.replace属性。这种方法有助于将浏览器历史中的当前页面替换成另一个页面,但在这里,用户将无法返回到原来的页面。
语法
window.location.replace("new_url");
在这个语法中,我们将获得与window.location.href例子相同的效果,但这里的区别是,用户的当前页面将不会被保存在浏览器的历史记录中。
例子
在这个例子中,我们定义了一个按钮(Load),当点击这个按钮时,会显示一个函数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://www.tutorialspoint.com");
}
</script>
</body>
</html>
window.location.assign
在这个方法中,我们使用window.location.assign方法,该方法用于在浏览器的历史记录中添加一个新的页面,允许用户返回到用户浏览的原始页面。
语法
window.location.assign("new_url");
在这个语法中,它的效果与window.location的例子相同,但这里的区别是,用户的当前页面将被保存在浏览器的历史记录中。
例子
在这个例子中,我们定义了一个按钮(Load),当点击它时,会显示一个函数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://www.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()方法来完成。所有这些方法都能帮助开发者创建动态和互动的网页,帮助创造更好的用户互动,增强用户的应用体验。