"data"类型的Url格式
2012-09-21 13:10
295 查看
http://www.letuknowit.com/archives/76
http://jinguangyao1127.blog.163.com/blog/static/131281854201112121312264/
所谓"data"类型的Url格式，是在RFC2397中 提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个 点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。
data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，但是IE直到7.0版本都还没有支持，IE不支持的东西太多了，也不差这一个。:(
小例子
下面这个html代码可以在支持data类型Url的浏览器中运行，例如Firefox。运行后会看到一条蓝色渐变底色的标题。
view sourceprint?
这个渐变的蓝色底色实际上是用一个1x28的小图片通过横行重复(repeat-x)形成的。这个图片很小，不过104个字节，直接嵌入到html或css文件还是很合适的。
data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。
data类型Url的形式
既然是Url，当然也可以直接在浏览器的地址栏中输入。
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
在浏览器中输入以上的Url，会得到一个加粗的"Hello, world!"。也就是说，data:后面的数据直接用做网页的内容，而不是网页的地址。
简单的说，data类型的Url大致有下面几种形式。
view sourceprint?
因为Url是一种基于文本的协议，所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说，引入base64以后，就可以支持任意形式的数据格式。下面是个png图片的例子，会在浏览器中显示一个Mozilla的图标。
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 /9hAAAABGdBTUEAAK /INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz
//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD /1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw /8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi /G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq
/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ /SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==data 格式Url的种种应用举例
可以在Html的Img对象中使用，例如
<img src="http://jinguangyao1127.blog.163.com/blog/data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..."
/>
可以在Css的background-image属性中使用，例如
view sourceprint?
可以在Html的Css链接处使用，例如
<link rel="stylesheet" type="text/css"
href="http://jinguangyao1127.blog.163.com/blog/data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..."
/>
可以在Html的Javascript链接处使用，例如
<script type="text/javascript"
href="http://jinguangyao1127.blog.163.com/blog/data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的语法定义
在RFC中，完整的语法定义如下。
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的就是一般url中允许的字符，有些字符需要转义，例如"="要转义为"%3D"，不过我测试下来，至少在Firefox里面，不转义也是可以的。
parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。例如下面的例子。
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显示出"你好，中文！"。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。
Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试结果说明。
base64编码和内容的隐秘
把二进制数据转换成为Base64不是什么难事，比如Total Commander就有这样的功能。还有一些在线资源，
http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
有些在线转换把base64里面的“=”转换成为%3D，这个在Url中和“=”是一样的，不转换也没什么问题。
当然，这种Url还有一种隐秘的好处，就是将一些道貌岸然者不喜欢的东西，堂而皇之的放在页面上，例如下面这个数据。你可以Copy下来贴到地址栏里面去瞅瞅，呵呵呵:o)
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢？这是Data
URI scheme。
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。
在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
目前，Data URI scheme支持的类型有：
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图片数据
base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码，如echo base64_encode(file_get_contents(‘wg.png’));
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
举个图片的例子：
网页中一张图片可以这样显示：
HTML语言: 知蚁博客 程序设计
<img src=“http://www.letuknowit.com/images/wg.png”/>
也可以这样显示：
HTML语言: 知蚁博客 程序设计
<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>
我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍，O(∩_∩)O~。
http://jinguangyao1127.blog.163.com/blog/static/131281854201112121312264/
所谓"data"类型的Url格式，是在RFC2397中 提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个 点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。
data类型的Url格式早在1998年就提出了，时至今日，Firfox、Opera、Safari和Konqueror这些浏览器都已经支持，但是IE直到7.0版本都还没有支持，IE不支持的东西太多了，也不差这一个。:(
小例子
下面这个html代码可以在支持data类型Url的浏览器中运行，例如Firefox。运行后会看到一条蓝色渐变底色的标题。
view sourceprint?
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
02 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
03 | < html xmlns = "http://www.w3.org/1999/xhtml" > |
04 | < head > |
05 | < style type = "text/css" > |
06 | .title { |
07 | background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D); |
08 | background-repeat:repeat-x; |
09 | height:28px; |
10 | line-height: 28px; |
11 | text-align:center; |
12 | } |
13 | </ style > |
14 | </ head > |
15 | < body > |
16 | < div class = "title" >Hello, world!</ div > |
17 | </ body > |
18 | </ html > |
data格式的Url最直接的好处是，这些Url原本会引起一个新的网络访问，因为那里是一个网页的地址，现在不会有新的网络访问了，因为现在这里是网页的内容。这样做，会减少服务器的负载，当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。
data类型Url的形式
既然是Url，当然也可以直接在浏览器的地址栏中输入。
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
在浏览器中输入以上的Url，会得到一个加粗的"Hello, world!"。也就是说，data:后面的数据直接用做网页的内容，而不是网页的地址。
简单的说，data类型的Url大致有下面几种形式。
view sourceprint?
01 | data:,<文本数据> |
02 | data:text/plain,<文本数据> |
03 | data:text/html,< HTML 代码> |
04 | data:text/html;base64,< base64 编码的HTML代码> |
05 | data:text/css,< CSS 代码> |
06 | data:text/css;base64,< base64 编码的CSS代码> |
07 | data:text/javascript,< Javascript 代码> |
08 | data:text/javascript;base64,< base64 编码的Javascript代码> |
09 | data:image/gif;base64,base64编码的gif图片数据 |
10 | data:image/png;base64,base64编码的png图片数据 |
11 | data:image/jpeg;base64,base64编码的jpeg图片数据 |
12 | data:image/x-icon;base64,base64编码的icon图片数据 |
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 /9hAAAABGdBTUEAAK /INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz
//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD /1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw /8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi /G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq
/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ /SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==data 格式Url的种种应用举例
可以在Html的Img对象中使用，例如
<img src="http://jinguangyao1127.blog.163.com/blog/data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..."
/>
可以在Css的background-image属性中使用，例如
view sourceprint?
1 | div.image { |
2 | width : 100px ; |
3 | height : 100px ; |
4 | background-image : url (data:image/x- icon ;base 64 ,AAABAAEAEBAAAAAAAABoBQAAF...); |
5 | } |
<link rel="stylesheet" type="text/css"
href="http://jinguangyao1127.blog.163.com/blog/data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..."
/>
可以在Html的Javascript链接处使用，例如
<script type="text/javascript"
href="http://jinguangyao1127.blog.163.com/blog/data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的语法定义
在RFC中，完整的语法定义如下。
dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的就是一般url中允许的字符，有些字符需要转义，例如"="要转义为"%3D"，不过我测试下来，至少在Firefox里面，不转义也是可以的。
parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。例如下面的例子。
data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显示出"你好，中文！"。如果吧charset部分去掉，就会显示乱码，因为我用的是UTF-8编码。
Firefox有一个data类型Url的测试页面，列出了各种格式的data类型Url的测试Url，和测试结果说明。
base64编码和内容的隐秘
把二进制数据转换成为Base64不是什么难事，比如Total Commander就有这样的功能。还有一些在线资源，
http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
有些在线转换把base64里面的“=”转换成为%3D，这个在Url中和“=”是一样的，不转换也没什么问题。
当然，这种Url还有一种隐秘的好处，就是将一些道貌岸然者不喜欢的东西，堂而皇之的放在页面上，例如下面这个数据。你可以Copy下来贴到地址栏里面去瞅瞅，呵呵呵:o)
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么这是什么呢？这是Data
URI scheme。
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张1X36的白灰png图片。
在上面的Data URI中，data表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
目前，Data URI scheme支持的类型有：
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图片数据
base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，在PHP中可以用函数base64_encode() 进行编码，如echo base64_encode(file_get_contents(‘wg.png’));
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
举个图片的例子：
网页中一张图片可以这样显示：
HTML语言: 知蚁博客 程序设计
<img src=“http://www.letuknowit.com/images/wg.png”/>
也可以这样显示：
HTML语言: 知蚁博客 程序设计
<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>
我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍，O(∩_∩)O~。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 不能将"constchar*"类型的值分配到"LPCWSTR"类型的实体错误解决方法
- "Unable to get image data from canvas because the canvas has been tainted by cross-origin data"问题产生原
- 类型“System.Data.Objects.DataClasses.EntityObject”在未被引用的程序集中定义必须添加对程序集“System.Data.Entity"引用
- "System.Data.OracleClient 需要 Oracle客户端软件8.1.7或更高版本"的解决办法
- "没有OledbDataReader.Close()又能如何?"……？！
- 总结Asp.net中Page加载PostData的具体过程 进而解决"获取动态创建的控件的PostData数据"问题
- "const char *" 类型的实参与 "LPCTSTR" 类型的形参不兼容
- 解决关于"因为配置类型不正确，系统无法开始服务器进程..."的错误
- <input type="file" />浏览时只显示指定文件类型
- MVC 强类型传值Model。和弱类型传值ViewData[""]。及用EF进行增删查改（母版页的使用）
- "Essential WPF - Chapter 6 Data" 阅读笔记
- <form method=post action="addNew_hxxm.jsp" name="form1"enctype="multipart/form-data">
- <input type="file" />浏览时只显示指定文件类型
- vs2013 IntelliSense: "const char *" 类型的实參与 "LPCWSTR" 类型的形參不兼容
- "const char*"类型的实参与LPCTSTR类型的形参不兼容
- asp.net/c# 用<input type="file" />实现文件上传,multipart/form-data
- MVC 强类型传值Model。和弱类型传值ViewData[""]。及用EF进行增删查改（母版页的使用）
- "分析器错误信息: 未能加载类型“WebApplication1.Global”。"类似问题总结。
- 【c++笔记七】教你使用"const类型的对象、成员函数"和"static类型的成员函数、变量"
- vs2013 IntelliSense: "const char *" 类型的实参与 "LPCWSTR" 类型的形参不兼容