当前位置: 代码迷 >> Web前端 >> data门类的Url格式
  详细解决方案

data门类的Url格式

热度:420   发布时间:2012-07-01 13:15:00.0
data类型的Url格式
   今天在浏览网站时发现了一个很奇妙的实现,于是就看了下页面的源码,发现页面中引入了一个很奇怪的URL(data:image/jpeg;base64,/9j/4QecRXhpZgAATU0AKgAAAAgABwESAAMA...),在chrome浏览器的network下看了下,确实发了一个这样的请求,但是没有指定ip,没有请求头,没有响应头,只有一大串字符串,请求会发去哪里呢?好奇的在google上搜了下,原来这是一种data类型的URL格式,可以把小数据直接嵌入到URL中,浏览器会自动解析data:后面的数据。

例如:在浏览器的地址栏中输入

data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
就会在浏览器中看到Hello,world!,也就是data:text/html后面的数据直接用做网页的内容,而不是网页的地址。

再例如:
data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D

会在浏览器中看到一张1×36的png图片。

在上面的data url中,data表示取得数据的协定名称,image/png是数据类型名称,base64是数据的编码方法,关于base64是网络上最常见的用于传输8bit字节代码的编码方式之一,可用于在http环境下传递较长的标识信息,逗号后面就是这个image/png文件base64编码后的数据。

目前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图片数据

  base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png’));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

data格式的Url最直接的好处是,这些Url原本会引起一个新的网络访问,因为那里是一个网页的地址,现在不会有新的网络访问了,因为现在这里是网页的内容。这样做,会减少服务器的负载,当然同时也增加了当前网页的大小,而且不会缓存图片。所以对“小”数据特别有好处。
  相关解决方案