微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何定时自动刷新网页?

如何定时自动刷新网页?

我们可以通过使用带有“http-equiv”属性的“Meta标签,或者使用setInterval()浏览器API来自动刷新网页。自动刷新网站有一定的用例,例如,在创建天气查找 Web 应用程序时,我们可能希望在设定的时间间隔后刷新我们的网站,以便向用户显示某个位置近乎准确的天气数据

让我们看看下面的两种方法,了解如何设置自动刷新网站。

方法 1

在这方法中,我们将使用“Meta标签的“http-equiv”属性在“content”属性中传递的特定时间间隔后刷新我们的Web应用程序。 HTML5规范中认为我们提供了Meta标签

语法

<Meta http-equiv="refresh" content="n"> 

这里的“n”为正整数,表示刷新页面的秒数。

示例

在此示例中,我们将使用“Meta标记的“http-equiv”属性每 2 秒刷新一次我们的 Web 应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatic Refresh a web page in fixed time?</title>
   <Meta http-equiv="refresh" content="2">
</head>
<body>
   <h3>How to Automatic Refresh a web page in fixed time?</h3>
</body>
</html>

方法2

在这方法中,我们将使用浏览器提供给我们的“setInterval()”API,它允许我们在每隔一定时间后运行一段代码,这两者都作为参数传递到浏览器 API。

语法

setInterval(callback_fn, time_in_ms)

“setInterval()”有2个参数,第一个是延迟后触发的回调函数,第二个是以毫秒为单位提供的延迟。

示例

在此示例中,我们将使用“setInterval()”浏览器 API 每 2 秒刷新一次我们的 Web 应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatic Refresh a web page in fixed time?</title>
</head>
<body>
   <h3>How to Automatic Refresh a web page in fixed time?</h3>
   <script>
      window.onload = () => {
         console.clear()
         console.log('page loaded!');
         setInterval(() => {
            window.location = window.location.href;
         }, 2000)
      }
   </script>
</body>
</html>

结论

在本文中,我们学习了如何使用 HTML5 和 JavaScript 两种不同的方法在固定时间后自动刷新我们的 Web 应用程序。在第一种方法中,我们使用“Meta标签的“http-equiv”属性,在第二种方法中,我们使用“setInterval”浏览器API。

以上就是如何定时自动刷新网页?的详细内容,更多请关注编程之家其它相关文章

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。