如何在固定时间自动刷新网页？

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

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

方法 1

在这种方法中，我们将使用“meta”标签的“http-equiv”属性在特定时间间隔后刷新我们的 Web 应用程序，该时间间隔在其“content”属性中传递。meta 标签在 HTML5 规范中默认提供给我们。

语法

<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()”接受两个参数，第一个是延迟后触发的回调函数，第二个是以毫秒为单位提供的延迟。

示例

在本例中，我们将使用“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。

更新于: 2023 年 2 月 22 日

8K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告