首页 > 网站 > WEB开发 > 正文

data类型的Url格式

2024-04-27 14:26:15
字体:
来源:转载
供稿:网友
data类型的Url格式

所谓"data"类型的Url格式, 是在RFC2397中提出的,目的对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。例如对于img这个Tag,哪怕这个图片非常非常 的小,小到只有一个点,也是要从另外一个外部的图片文件例如gif文件中读入的,如果浏览器实现了data类型的Url格式,这个文件就可以直接从页面文 件内部读入了。

data类型的Url格式早在1998年就提出了,时至今日,Firfox、Opera、Safari和Konqueror这些浏览器都已经支持,但是IE直到7.0版本都还没有支持,IE不支持的东西太多了,也不差这一个。

小例子下面这个html代码可以在支持data类型Url的浏览器中运行,例如Firefox。运行后会看到一条蓝色渐变底色的标题。

[html] view plaincopy
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <htmlxmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <styletype="text/CSS">
  6. .title{
  7. background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);
  8. background-repeat:repeat-x;
  9. height:28px;
  10. line-height:28px;
  11. text-align:center;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <divclass="title">Hello,world!</div>
  17. </body>
  18. </html>

这个渐变的蓝色底色实际上是用一个1x28的小图片通过横行重复(repeat-x)形成的。这个图片很小,不过104个字节,直接嵌入到html或css文件还是很合适的。data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址,现在不会有新的网络访问了,因为现在这里是网页的内容。这样做,会减少服务器的负载,当然同时也增加了当前网页的大小。所以对“小”数据特别有好处。data类型Url的形式既然是Url,当然也可以直接在浏览器的地址栏中输入。

[html] view plaincopy
  1. data:text/html,<html><body><p><b>Hello,world!</b></p></body></html>

在浏览器中输入以上的Url,会得到一个加粗的"Hello, world!"。也就是说,data:后面的数据直接用做网页的内容,而不是网页的地址。简单的说,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进行编码。换句话说,引入base64以后,就可以支持任意形式的数据格式。下面是个png图片的例子,会在浏览器中显示一个Mozilla的图标。

[html] view plaincopy
  1. 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对象中使用,例如

[html] view plaincopy
  1. <imgsrc="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..."/>

可以在Css的background-image属性中使用,例如

[html] view plaincopy
  1. div.image{
  2. width:100px;
  3. height:100px;
  4. background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
  5. }

可以在Html的Css链接处使用,例如

[html] view plaincopy
  1. <linkrel="stylesheet"type="text/css"
  2. href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..."/>

可以在Html的Javascript链接处使用,例如

[html] view plaincopy
  1. <scripttype="text/javascript"
  2. href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

完整的语法定义

在RFC中,完整的语法定义如下。

dataurl := "data:" [ mediatype ] [ ";base64" ] "," datamediatype := [ type "/" subtype ] *( ";" parameter )data := *urlcharparameter := attribute "=" valueurlchar指的就是一般url中允许的字符,有些字符需要转义,例如"="要转义为"%3D",不过我测试下来,至少在Firefox里面,不转义也是可以的。parameter可以对mediatype进行属性的扩展,常见的是charset,用来定义编码格式,在多语言情况下需要用到。例如下面的例子。

[html] view plaincopy
  1. 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中和“=”是一样的,不转换也没什么问题。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表