Data:url Protocol
来源:互联网 发布:天融信应届生工资 知乎 编辑:程序博客网 时间:2024/05/18 02:07
所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常的小,小到只有一个 点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文件内部读入了。
data类型的Url格式早在1998年就提出了,时至今日,Firfox、Opera、Safari和Konqueror这些浏览器都已经支持,但是IE直到7.0版本都还没有支持,IE不支持的东西太多了,也不差这一个。
例:下面这个html代码可以在支持data类型Url的浏览器中运行,例如Firefox。运行后会看到一条蓝色渐变底色的标题。
<!DOCTYPE html PUBLIC "-//W3C/ /DTD XHT ML 1.0 T ransitio nal//EN" "http://w ww.w3.or g/TR/xht ml1/DTD/ xhtml1-t ransitio nal.dtd"><html xmlns="h ttp://ww w.w3.org /1999/xh tml" ><head><style type="t ext/css">.title { backgrou nd-image :url(dat a:image/ gif;base 64,R0lGO DlhAQAcA LMAAMXh9 6HR97XZ9 8Hf98Xg9 7DX97nb9 8Lf97vc9 8Tg973d9 6rU97ba9 7%2Fe96X S9wAAACH 5BAAAAAA ALAAAAAA BABwAAAQ VMLhVBDN ItXESAUR yDI2CGIx QLE4EADs %3D); backgrou nd-repea t:repeat -x; height:2 8px; line-hei ght: 28p x; text-ali gn:cente r;}</styl e></head ><body><div c lass="ti tle">Hel lo, worl d!</div></body ></html >
这个渐变的蓝色底色实际上是用一个1x28的小图片通过横行重复(repeat-x)形成的。这个图片很小,不过104个字节,直接嵌入到html或css文件还是很合适的。
data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址,现在不会有新的网络访问了,因为现在这里是网页的内容。这样做,会减少服务器的负载,当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。
data类型Url的形式
既然是Url,当然也可以直接在浏览器的地址栏中输入。
data:text/html,< html><bo dy><p><b >Hello, world!</ b></p></ body></h tml>
在浏览器中输入以上的Url,会得到一个加粗的"Hello, world!"。也就是说,data:后面的数据直接用做网页的内容,而不是网页的地址。
简单的说,data类型的Url大致有下面几种形式。
data:,<文本数据>data:tex因为Url是一种基于文本的协议,所以gif/png/jpeg这种二进制属于需要用base64进行编码。换句话说,引入base64以后,就可以支持任意形式的数据格式。下面是个png图片的例子,会在浏览器中显示一个Mozilla的图标。t/plain,<文本数据>data:tex t/html,<HTML代码>data:tex t/html;b ase64,<base6 4编码的HTML data:tex代码> t/css,<CSS代码>data:tex t/css;ba se64,<base6 4编码的CSS代码> data:text/javasc ript,<Javas cript代码> data:text/javasc ript;bas e64,<base6 4编码的Java data:imascript代码> ge/gif;b ase64,base64编码 的gif图片数据 data:image/png;b ase64,base64编码 的png图片数据 data:image/jpeg; base64,base64编码 的jpeg图片数据 data:image/x-ico n;base64 ,base64编码 的icon图片数据
data:image/png;b ase64,iV BORw0KGg oAAAANSU hEUgAAAB AAAAAQCA YAAAAf8/ 9hAAAABG dBTUEAAK /INwWK6Q AAABl0RV h0U29mdH dhcmUAQW RvYmUgSW 1hZ2VSZW FkeXHJZT wAAAHWSU RBVHjaYv z//z8DJQ AggJiQOe /fv2fv7O z8rays/N +VkfG/iY nJfyD/1+ rVq7ffu3 dPFpsBAA HEAHIBCJ 85c8bN2N j4vwsDw/ 8zQLwKiO 8CcRoQu0 DxqlWrds HUwzBAAI GJmTNnPg Ya9j8Uqh FElwPxf2 MIDeIrKS n9FwSJoR kAEEAM0D D4DzMAyP i/G+QKY4 hh5WAXGf 8PDQ0FGw J22d27Cj ADAAIIrL mjo+MXA9 R2kAHvGB A2wwx6B8 W7od6CeQ cggKCmCE L8bgwxYC bUIGTDVk HDBia+Cu otgACCue D3TDQN75 D4xmAvCo K9ARMHBz Aw0AECiB HkAlC0Md y7x9ABNA 3obAZXIA a6iKEcGl MVQHwWyj YuL2d4v2 cPg8vZsw x7gHyAAA K7AOif7S AbOqCmn4 Ha3AHFsI DtgPq/vL z8P4MSkJ 2W9h8ggB jevXvHDo 4FQUQg/k dypqCg4H 8lUIACnQ /SOBMYI8 bAsAJFPc j1AAEEjw VQqLpAbX mH5BJjqI 0gi9DTAA gDBBCcAV LkgmQ7yK CZxpCQxq UZhAECCJ 4XgMl493 ug21ZD+a DAXH0WLM 4A9MZPXJ kJIIAwTA R5pQMala CABQUULt tBGCCAGC nNzgABBg AMJ5THwG vJLAAAAA BJRU5Erk Jggg==
data格式Url的种种应用举例
可以在Html的Img对象中使用,例如
<img src="data:image/x- icon;bas e64,AAABAAEA EBAAAAAA " />AABoBQAA F...
可以在Css的background-image属性中使用,例如
div.image { width:10 0px; height:1 00px; backgrou nd-image :url(data:image/x- icon;bas e64,AAABAAEA EBAAAAAA );}AABoBQAA F...
可以在Html的Css链接处使用,例如
<linkrel="sty lesheet" type="t ext/css" href="data:text/css ;base64,LyogKioq KiogVGVt " />cGxhdGUg Kioq...
可以在Html的Javascript链接处使用,例如
<script type=" text/jav ascript" href="data:text/jav ascript; base64,dmFyIHNj T2JqMSA9 "></scrIG5ldyBz Y3Jv... ipt>
完整的语法定义
在RFC中,完整的语法定义如下。
dataurl:= "d ata:" [ mediatyp e ] [ "; base64" ] "," da tamedia type := [ type "/" subt ype ] *( ";" par ameter ) data := * urlcharparamete r := at tribute "=" valu e]]
urlchar指的就是一般url中允许的字符,有些字符需要转义,例如"="要转义为"%3D",不过我测试下来,至少在Firefox里面,不转义也是可以的。
parameter可以对mediatype进行属性的扩展,常见的是charset,用来定义编码格式,在多语言情况下需要用到。例如下面的例子。
data:text/plain; charset= UTF-8;ba se64,5L2 g5aW977y M5Lit5pa H77yB
这个例子会显示出"你好,中文!"。如果吧charset部分去掉,就会显示乱码,因为我用的是UTF-8编码。
Firefox有一个data类型Url的测试页面,列出了各种格式的data类型Url的测试Url,和测试结果说明。
base64编码和内容的隐秘
把二进制数据转换成为Base64不是什么难事,比如Total Commander就有这样的功能。还有一些在线资源,
- http://www.greywyvern.com/code/php/binary2base64
- http://www.kawa.net/works/js/data-scheme/base64-e.html
有些在线转换把base64里面的“=”转换成为%3D,这个在Url中和“=”是一样的,不转换也没什么问题。
ref:www.bobopo.com/article/code/data_url.htm- Data:url Protocol
- data protocol
- Reliable Data Protocol
- URL Protocol- -(coolice)
- URL Protocol应用
- URL Protocol Handler
- 自定义URL Protocol 协议
- 自定义URL Protocol 协议
- DATA URL简介及DATA URL利弊
- $.get( url, [data], [callback] )
- Data类型的Url
- 接口url 获取data
- Data URL和图片
- Data URL和图片
- iOS 编码 URL Data
- Data URL和图片
- Data URL和图片
- data类型的Url
- web.xml中配置Spring的OpenSessionInViewFilter的作用
- PX项目终于要搬出大连了!
- IT行业计算机应用基础
- android 按钮设计
- 工信部下半年将加强物联网关键技术研发
- Data:url Protocol
- C#委托,事件与回调函数
- 开源Flex项目
- 东方英卡中标福建、四川移动支付项目
- word排版小技巧总结
- eBay以2.4亿美元收购移动支付服务商Zong
- list
- s3c6410字符设备(二)按键驱动程序
- SAP Business Objects and IBM Cognos comparison