用 JavaScript 实现页面刷新和重新加载 | 您所在的位置:网站首页 › js延时刷新 › 用 JavaScript 实现页面刷新和重新加载 |
原文: Refresh the Page in JavaScript – JS Reload Window Tutorial 当你在开发像博客或页面这样的应用程序时,数据可能会根据用户的操作而改变,你会希望该页面经常刷新。 当页面刷新或重新加载时,它将显示基于这些用户互动的任何新数据。好消息是,你可以在 JavaScript 中用一行代码实现这种类型的功能。 在这篇文章中,我们将学习如何在 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 中执行页面重新加载/刷新到目前为止,我们已经看到了重载在 JavaScript 中是如何工作的。现在让我们来看看,当一个事件发生时,或者当一个像按钮点击这样的动作发生时,你可以如何实现这个功能: Reload Page注意:这与我们使用 document.location.reload() 时的效果类似。 如何在 JavaScript 中自动刷新/重新加载一个页面我们也可以使用 setTimeOut() 方法让页面在一个固定的时间后被刷新,如下图所示: setTimeout(() => { document.location.reload(); }, 3000);使用上面的代码,我们的网页将每 3 秒重新加载一次。 到目前为止,我们已经看到如何在 HTML 文件中使用重载方法——把它附加到特定的事件时,以及在 JavaScript 文件中使用重载方法。 如何使用 JavaScript 中的 History 函数刷新/重新加载页面History 函数是另一种刷新页面的方法。History 函数正常使用,通过传入一个正值或负值来往后或向前导航。 例如,如果我们想回到过去,我们将使用: history.go(-1);这将加载页面,并把我们带到我们导航到的前一个页面。但如果我们只想刷新当前页面,可以不传递任何参数或传递 0(一个中性值)来实现: history.go(); history.go(0);注意:这也和我们在 HTML 中的 setTimeOut() 方法和点击事件中添加 reload() 方法的方式一样。 总结在这篇文章中,我们学习了如何使用 JavaScript 刷新页面。我们还澄清了一个常见的误解,它引导人们在 reload() 方法中传递布尔参数。 谢谢你阅读本文! |
CopyRight 2018-2019 实验室设备网 版权所有 |