在HTML中，实现每隔60秒自动刷新页面的功能

最新推荐文章于 2024-09-19 11:34:15 发布

饭上的爱豆

最新推荐文章于 2024-09-19 11:34:15 发布

阅读量7.1k

点赞数 4

分类专栏： HTML 文章标签： html html5 ajax

本文链接：https://blog.csdn.net/qq_45708267/article/details/120813597

版权

HTML 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

一、简介

在 html 元素 < head > 头部区域内的 meta 标签中有个属性是 http-equiv=“Refresh” ，该属性被所有主流浏览器支持。
其用途有两种：
1、网页定期自动刷新；
2、自动跳转到指定页面，这个自动跳转的好处就是不需要 JS 调用，属于纯html网页自动跳转。

二、网页定期自动刷新

refresh 出现在 http-equiv 属性中，使用属性 content=“时间”，时间以秒为单位，表示每隔多少秒之后自动刷新该页面一次；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 每 60 秒自动刷新网页一次 -->
		<meta http-equiv="refresh" content="60" >
		<title>自动刷新页面</title>
	</head>
	<body>
		<h1>本网页每60秒刷新一次</h1>
	</body>
</html>

定期自动刷新，比较适合用于时效性很强的场景中应用，比如说，新闻和论坛页面等，因为这些场景不断的有新的新闻信息、而论坛经常有新帖发布和新的回复信息，及时刷新可以及时的展现更多新新闻内容和新帖及新的回复内容！

不过，随着web编程技术的发展，现在一般不会用refresh这个功能来刷新，而是都转向使用ajax等新技术！

三、自动跳转至指定网页

利用http-equiv="Refresh"属性设置在多少秒之后自动跳到到另一个页面
< meta http-equiv=“refresh” content=“时间;url=这里是跳转的URL” >

<!-- 立刻马上跳转到刘代码博客首页，就把时间设置成0秒 -->
<meta http-equiv="refresh" content="0;url=http://www.liudaima.com" >

<!-- 想要4秒之后跳转到刘代码博客首页 -->
<meta http-equiv="refresh" content="4;url=http://www.liudaima.com" >

四、说明

1、meta 标签的功能

meta 标签的一个很重要的功能就是设置关键字，来帮助你的主页被各大搜索引擎登录，提高网站的访问量。在这个功能中，最重要的就是对 Keywords 和 description 的设置。因为按照搜索引擎的工作原理,搜索引擎首先派出机器人自动检索页面中的 keywords 和 decription ，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。因此，我们必须设置好关键字，来提高页面的搜索点击率。

2、meta 标签中的 http-equiv 类型

A、Expires(期限)
 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
 用法：＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞
 注意：必须使用GMT的时间格式。
 
B、Pragma(cache模式)
 说明：禁止浏览器从本地计算机的缓存中访问页面内容。
 用法：＜meta http-equiv="Pragma" content="no-cache"＞
 注意：这样设定，访问者将无法脱机浏览。
 
C、Refresh(刷新)
 说明：自动刷新并指向新页面。
 用法：＜meta http-equiv="Refresh" content="2；URL=http://www.webjx.com"＞
 注意：其中的2是指停留2秒钟后自动刷新到URL网址。
 
D、Set-Cookie(cookie设定)
 说明：如果网页过期，那么存盘的cookie将被删除。
 用法：＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞
 注意：必须使用GMT的时间格式。
 
E、Window-target(显示窗口的设定)
 说明：强制页面在当前窗口以独立页面显示。
 用法：＜meta http-equiv="Window-target" content="_top"＞
 注意：用来防止别人在框架里调用自己的页面。
 
F、content-Type(显示字符集的设定)
 说明：设定页面使用的字符集。
 用法：＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞