如何在固定时间内自动刷新网页
假设给定一个HTML文档,任务是在网页浏览器中在一定时间之后自动刷新网页。我们将预先定义一个时间段,浏览器自动刷新网页。
这可以通过两种方式实现:
- 使用“meta”标签
- 使用setInterval()浏览器API
示例: 您正在创建一个需要在特定较短的时间段后刷新的自动刷新网站。所以,在这种情况下,您可以使用meta http-equiv标签来刷新网页。这个http-equiv标签的另一个例子是,它可以用来重新加载一个需要在每个小时间间隔后更新以显示分钟级天气变化的天气网站。
方法1: 可以在HTML中使用head元素中的meta标签来自动刷新网页,使用http-equiv属性。这是HTML 5中的内置属性。可以通过Meta标签中的content属性进一步添加刷新的时间段。
HTTP equiv属性可用于模拟HTTP响应头。该属性受主要的Web浏览器支持,如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>
输出:
方法2: 使用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()', 2000);
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks code</h1>
</body>
</html>
输出:
阅读更多:JavaScript 教程