HTML Meta, http-equiv, Refresh

在HTML页面中,如果想实现定时刷新或重定向,我们可以使用meta标签的refresh功能:

<!-- 5秒后刷新页面 -->  
<meta http-equiv="refresh" content="5">  
<!-- 5秒后重定向到http://example.com -->  
<meta http-equiv="refresh" content="5; url=http://example.com">  

那么,meta标签是什么?http-equiv又是什么?这种refresh方式如何使用?而它又有哪些好处呢?

meta标签

顾名思义,meta标签的作用是对HTML页面的元数据信息进行描述,从而为浏览器的渲染提供更多的信息。一个HTML页面可以包含多个meta标签,而每一个meta标签则用键值对的方式保存一条元数据:

<meta name="key_here" content="value_here" >  

值得注意的是,在HTML中meta标签是没有结束标签的,而在XHTML中则与之相反,meta标签必须被显式的关闭。

http-equiv

在meta标签中,有一类特殊的key类型,叫做http-equiv。根据W3C的定义,http-equiv可以在meta标签中替代name,如果这么做的话,HTTP服务器会把http-equiv属性及其值放在HTTP response的响应头里面(http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.2):

The http-equiv attribute can be used in place of the name attribute and has a special significance when documents are retrieved via the Hypertext Transfer Protocol (HTTP). HTTP servers may use the property name specified by the http-equiv attribute to create an [RFC822]-style header in the HTTP response.

问题是:目前没有一个HTTP服务器是这么做的(http://stackoverflow.com/questions/5236900/meta-http-equiv-is-it-sent-as-part-of-an-http-header-or-does-the-client-parse )。原因很明显,如果要这么做的话,HTTP服务器就得预先解析所有的HTML文件并缓存所有的http-equiv键值对,而这是一个不小的开销。我们可以做一个有趣的小实验,编写一个含有http-equiv值的HTML文件并部署到HTTP服务器上;用Firefox打开该HTML文件并用Firebug截取相关的HTTP response,我们会发现http-equiv的内容并没有出现在response的响应头中。

事实上,http-equiv功能(出现在response的响应头中)的实现不是由HTTP服务器来完成的,而是由浏览器来模拟的。浏览器解析HTML文档的时候会把http-equiv的键值对当作响应头来处理(如果http-equiv与真正传回来的响应头冲突,http-equiv会覆写响应头)。

refresh

在http-equiv类型的meta标签中,有一种可用于定时刷新页面:refresh

<!-- x秒后刷新当前页面 -->  
<meta http-equiv="refresh" content="x">  
<!-- x秒后重定向到URLLINK -->  
<meta http-equiv="refresh" content="x; url=URLLINK">  
<!-- 浏览器打开页面后立即重定向到URLLINK -->  
<meta http-equiv="refresh" content="0; url=URLLINK">  

在上面第三个例子中,浏览器一旦打开页面就立即转接到了另外一个URL,为什么会有这么“奇怪”的写法?直接向客户端提供目标地址(URLLINK)不就可以了吗?什么情况下需要这么做呢?

一个典型的场景是webapp中的首页设置(welcome page)。如果我们需要展示给用户的首页地址只是一个URL而不是一个真实存在的文件,比如/Index.action,那么在web.xml中直接将Index.action作为welcome page进行设置是行不通的 — webapp将会报错:Index.action文件不存在。而解决方案就是编写一个非常简单的Index.html文件并将其作为首页,在该文件中指定,一旦文件打开则立即重定向到Index.action:

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="refresh" content="0; url=Index.action">  
</head>  
<body>  
</body>  
</html>  

与别的方法(在HTTP服务器中设置301,302重定向规则,或在页面中使用JavaScript进行重定向)相比,通过meta标签来实现重定向的好处很明显:

  • 简单易用。不需要在Web服务器上进行额外的配置,也不需要编写额外的脚本代码。
  • 由HTML标准定义,主流浏览器均支持(模拟http响应头)。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!