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

cssweb developmentfront end technology更新于 2025/1/24 4:28:17

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

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

方法 1

在此方法中，我们将使用"meta"标签的"http-equiv"属性，在特定时间间隔后刷新 Web 应用程序，该时间间隔由其"content"属性传递。 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 允许我们在每隔一定时间运行一段特定代码，这两个代码都作为参数传递给浏览器 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>