所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文件内部读入了。
data类型的Url格式早在1998年就提出了,时至今日,Firefox、Opera、Safari和Konqueror这些浏览器都已经支持,但是IE不支持该格式。
来测试下你的浏览器是否支持该格式,请把下面的一行代码放到浏览到地址栏里,回车后能看到“hello,world!",就表示你的浏览器支持该格式。
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
如图: ,能看到本图的浏览器也是支持该格式的。
data类型的Url大致有下面几种形式
data:,<文本数据> data:text/plain,<文本数据> data:text/html,<HTML代码> data:text/html;base64,<base64编码的HTML代码> data:text/css,<CSS代码> data:text/css;base64,<base64编码的CSS代码> data:text/javascript,<Javascript代码> data:text/javascript;base64,<base64编码的Javascript代码> data:image/gif;base64,base64编码的gif图片数据 data:image/png;base64,base64编码的png图片数据 data:image/jpeg;base64,base64编码的jpeg图片数据 data:image/x-icon;base64,base64编码的icon图片数据
因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。
可以在Css的background-image属性中使用,例如
div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}
<link rel="stylesheet" type="text/css" href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
<script type="text/javascript" href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
在RFC中,完整的语法定义如下。
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
其中 mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的就是一般url中允许的字符,有些字符需要转义,例如"="要转义为"%3D"。
如果你能看到本文中的图片,请用右键查看下页面代码,看看img标签中的src的格式就是这个data格式,你可以把img后面的src的数据拷贝到浏览器地址中查看一下试试。
值得注意的是,用这种方法把数据保存在页面代码中,将使页面变大,延长了浏览器加载的速度,请衡量后使用。