如何在JavaScript中重新加载一个网页

374 阅读3分钟

当你在开发像博客或页面这样的应用程序时,数据可能会根据用户的操作而改变,你会希望该页面经常刷新。

当页面刷新或重新加载时,它将显示基于这些用户互动的任何新数据。好消息是,你可以用一行代码在JavaScript中实现这种类型的功能。

在这篇文章中,我们将学习如何在JavaScript中重新加载一个网页,以及看到其他一些我们可能想要实现这些重新加载的情况和如何实现。

如何在JavaScript中刷新一个页面,用location.reload()

你可以使用location.reload() JavaScript方法来重新加载当前的URL。这个方法的功能类似于浏览器的刷新按钮。

reload() 方法是负责页面重载的主要方法。另一方面,location 是一个接口,表示它所链接的对象的实际位置(URL)--在本例中是我们要重新加载的页面的URL。它可以通过document.locationwindow.location 来访问。

以下是重新加载页面的语法:

window.location.reload();

注意:当你阅读一些关于 "JavaScript中的页面重载 "的资源时,你会遇到各种解释,说relaod方法接受布尔值作为参数,而且location.reload(true) ,帮助强制重载,以便绕过其缓存。但事实并非如此。

根据MDN文档,布尔参数不是当前location.reload() 的规范的一部分--事实上,它从来没有成为任何已发布的location.reload() 规范的一部分。

另一方面,Firefox等浏览器支持使用一个非标准的布尔参数,称为forceGet ,用于location.reload() ,它指示Firefox绕过其缓存并强制重新加载当前文档。

除了Firefox之外,你在其他浏览器的location.reload() 调用中指定的任何参数都会被忽略,没有任何作用。

如何在点击按钮时在JavaScript中执行页面重新加载/刷新

到目前为止,我们已经看到了重载在JavaScript中的作用。现在让我们来看看,当一个事件发生时,或者当一个像按钮点击这样的动作发生时,你可以如何实现这个可以:

<button type="button" onClick="window.location.reload()">
   Reload Page
</button>

注意:这与我们使用document.location.reload() 的工作原理相似。

如何在JavaScript中自动刷新/重新加载一个页面

我们也可以使用setTimeOut() 方法让页面在固定的时间后刷新,如下图所示:

setTimeout(() => {
  document.location.reload();
}, 3000);

使用上面的代码,我们的网页将每3秒重新加载一次。

到目前为止,我们已经看到了如何在我们的HTML文件中使用重载方法,当我们把它附加到特定的事件,以及在我们的JavaScript文件中。

如何使用JavaScript中的History函数刷新/重新加载页面

History函数是另一种刷新页面的方法。历史函数像往常一样,通过传入一个正值或负值来往后或向前导航。

例如,如果我们想回到过去,我们将使用:

history.go(-1);

这将加载页面并将我们带到我们导航到的前一个页面。但如果我们只想刷新当前页面,我们可以不传递任何参数或传递0 (一个中性值)来实现:

history.go();
history.go(0);

注意:这与我们将reload() 方法添加到HTML中的setTimeOut() 方法和点击事件中的方式也相同。

总结

在这篇文章中,我们学习了如何使用JavaScript刷新页面。我们还澄清了一个常见的误解,即导致人们将布尔参数传入reload() 方法。

谢谢你的阅读!