JS刷新当前页面的方法

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

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

在本JavaScript教程中，我们将学习如何在 JavaScript 中重新加载网页，并了解我们可能希望实现这些重新加载的其他一些情况以及如何执行此操作。

如何在 JavaScript 中刷新页面location.reload()

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

该reload()方法是负责页面重新加载的主要方法。另一方面，location是一个接口，表示它链接到的对象的实际位置(URL)——在这种情况下，是我们要重新加载的页面的 URL。可以通过document.location或访问它window.location。

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

window.location.reload();

注意：当您阅读有关“JavaScript 中的页面重新加载”的一些资源时，您会遇到各种解释，说明 relaod 方法接受布尔值作为参数，并location.reload(true)帮助强制重新加载以绕过其缓存。但事实并非如此。

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

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

除 Firefox 外，您location.reload()在其他浏览器中调用时指定的任何参数都将被忽略且无效。

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

到目前为止，我们已经了解了 JavaScript 中 reload 是如何工作的。现在让我们看看当事件发生或发生按钮点击等动作时如何实现这一点：

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

注意：这与我们使用document.location.reload().

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

我们还可以允许在固定时间后引用页面，使用setTimeOut()如下所示的方法：

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

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

到目前为止，我们已经了解了当我们将其附加到特定事件时如何在我们的 HTML 文件中以及在我们的 JavaScript 文件中使用 reload 方法。

如何使用 JavaScript 中的历史功能刷新/重新加载页面

历史功能是另一种刷新页面的方法。历史函数通常用于通过传入正值或负值来向后或向前导航。

例如，如果我们想回到过去，我们将使用：

history.go(-1);

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

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

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

在本文中，我们学习了如何使用 JavaScript 刷新页面。我们还澄清了导致人们将布尔参数传递给reload()方法的常见误解。如果大家想了解更多相关知识，不妨来关注一下本站的Java极悦在线学习，里面的教程文档细致全面，很适合没有基础的小伙伴学习，希望对大家能够有所帮助。