用 JavaScript 实现页面刷新和重新加载

原文： Refresh the Page in JavaScript – JS Reload Window Tutorial

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

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

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

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

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

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

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

window.location.reload();

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

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

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

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

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

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

注意：这与我们使用 document.location.reload() 时的效果类似。

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

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

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

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

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

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

history.go(-1);

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

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

注意：这也和我们在 HTML 中的 setTimeOut() 方法和点击事件中添加 reload() 方法的方式一样。

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

谢谢你阅读本文！