原文:
http://www.lifelaf.com/blog/?p=481
在HTML页面中,如果想实现定时刷新或重定向,我们可以使用meta标签的refresh功能:
<!-- 5秒后刷新页面 -->
<metahttp-equiv="refresh"content="5">
<!-- 5秒后重定向到http://example.com -->
<metahttp-equiv="refresh"content="5; url=http://example.com">
那么,meta标签是什么?http-equiv又是什么?这种refresh方式如何使用?而它又有哪些好处呢?
meta标签
顾名思义,meta标签的作用是对HTML页面的元数据信息进行描述,从而为浏览器的渲染提供更多的信息。一个HTML页面可以包含多个meta标签,而每一个meta标签则用键值对的方式保存一条元数据:
<metaname="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秒后刷新当前页面 -->
<metahttp-equiv="refresh"content="x">
<!-- x秒后重定向到URLLINK -->
<metahttp-equiv="refresh"content="x; url=URLLINK">
<!-- 浏览器打开页面后立即重定向到URLLINK -->
<metahttp-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><metahttp-equiv="refresh"content="0; url=Index.action"></head><body></body></html>
与别的方法(在HTTP服务器中设置301,302重定向规则,或在页面中使用JavaScript进行重定向)相比,通过meta标签来实现重定向的好处很明显:
- 简单易用。不需要在Web服务器上进行额外的配置,也不需要编写额外的脚本代码。
- 由HTML标准定义,主流浏览器均支持(模拟http响应头)。
shaochuancs@gmail.com