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

原创已于 2022-03-02 14:17:13 修改 · 6.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#safari #javascript #前端

于 2022-03-02 14:09:58 首次发布

本文介绍了如何使用HTML的meta标签和JavaScript的setInterval()方法实现网页自动刷新功能。通过设置http-equiv=refresh的content属性或JavaScript函数，可以在指定时间后自动刷新网页，适用于需要实时更新内容的网站，如天气预报站点。示例代码详细展示了两种方法的实现过程。

假设我们给了一个 HTML 文档，任务是在 Web 浏览器中一段时间后自动刷新网页。我们会预定义一个时间段，浏览器会自动刷新网页。

示例：您正在创建一个自动刷新网站，该网站需要在较短的一段时间后刷新。因此，在这种情况下，您可以使用 meta http-equiv 标签来刷新网页。这个 http-equiv 标签的另一个例子是它可以用来重新加载一个天气网站，该网站需要每隔一小段时间更新一次，以显示微小的天气变化。

方法 1：可以使用 http-equiv 属性使用 HTML 的 head 元素中的元标记自动刷新网页。它是 HTML 5 的内置属性。可以使用 Meta 标记中的 content 属性进一步添加刷新的时间段。

HTTP equiv 属性可用于模拟 HTTP 响应标头。所有主要网络浏览器都支持该属性，例如 Google Chrome、Mozilla Firefox、Microsoft Edge、Safari、Opera Mini 等。

句法：

<meta http-equiv="refresh" content="10">

例子：

<!DOCTYPE html>
<html>

<head>
	<title>Page Title</title>
	<meta http-equiv="refresh" content="10">
</head>

<body>
	<h2>Welcome To GFG</h2>
	<p>The code will reload after 10s.</p>
</body>

</html>

方法二： 使用 setInterval() 方法：另一种访问网页自动刷新属性的方法是使用下面的 JavaScript 代码，直到调用 ClearInterval()，setInterval() 将继续不断地调用自己。

句法：

<script>
    function autoRefresh() {
        window.location = window.location.href;
    }
    setInterval('autoRefresh()', 5000);
</script>

例子：

<!DOCTYPE html>
<html>

<head>
	<title>
		Reloading page after 5 seconds
	</title>
	
	<script>
		function autoRefresh() {
			window.location = window.location.href;
		}
		setInterval('autoRefresh()', 5000);
	</script>
</head>

<body>
	<h1>Welcome to GeeksforGeeks code</h1>
</body>

</html>