瀏覽器中的data類(lèi)型的Url格式 data:image/png,data:image/jpeg!

發(fā)布時(shí)間：2012-02-22 11:06:30 作者：佚名

所謂 data 類(lèi)型的Url格式，是在RFC2397中提出的，目的對(duì)于一些小的數(shù)據(jù)，可以在網(wǎng)頁(yè)中直接嵌入，而不是從外部文件載入

所謂"data"類(lèi)型的Url格式，是在RFC2397中提出的，目的對(duì)于一些“小”的數(shù)據(jù)，可以在網(wǎng)頁(yè)中直接嵌入，而不是從外部文件載入。例如對(duì)于img這個(gè)Tag，哪怕這個(gè)圖片非常非常的小，小到只有一個(gè) 點(diǎn)，也是要從另外一個(gè)外部的圖片文件例如gif文件中讀入的，如果瀏覽器實(shí)現(xiàn)了data類(lèi)型的Url格式，這個(gè)文件就可以直接從頁(yè)面文件內(nèi)部讀入了。
data類(lèi)型的Url格式早在1998年就提出了，時(shí)至今日，F(xiàn)irfox、Opera、Safari和Konqueror這些瀏覽器都已經(jīng)支持，但是IE直到7.0版本都還沒(méi)有支持，IE不支持的東西太多了，也不差這一個(gè)。:(
小例子
下面這個(gè)html代碼可以在支持data類(lèi)型Url的瀏覽器中運(yùn)行，例如Firefox。運(yùn)行后會(huì)看到一條藍(lán)色漸變底色的標(biāo)題。

復(fù)制代碼

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
.title {
background-image:url(data:image/gif;base64,R0lGODlhAQAcALMAAMXh96HR97XZ98Hf98Xg97DX97nb98Lf97vc98Tg973d96rU97ba97%2Fe96XS9wAAACH5BAAAAAAALAAAAAABABwAAAQVMLhVBDNItXESAURyDI2CGIxQLE4EADs%3D);
background-repeat:repeat-x;
height:28px;
line-height: 28px;
text-align:center;
}
</style>
</head>
<body>
<div class="title">Hello, world!</div>
</body>
</html>

這個(gè)漸變的藍(lán)色底色實(shí)際上是用一個(gè)1x28的小圖片通過(guò)橫行重復(fù)(repeat-x)形成的。
這個(gè)圖片很小，不過(guò)104個(gè)字節(jié)，直接嵌入到html或css文件還是很合適的。
data格式的Url最直接的好處是，這些Url原本會(huì)引起一個(gè)新的網(wǎng)絡(luò)訪(fǎng)問(wèn)，因?yàn)槟抢锸且粋€(gè)網(wǎng)頁(yè)的地址，
現(xiàn)在不會(huì)有新的網(wǎng)絡(luò)訪(fǎng)問(wèn)了，因?yàn)楝F(xiàn)在這里是網(wǎng)頁(yè)的內(nèi)容。這樣做，會(huì)減少服務(wù)器的負(fù)載，
當(dāng)然同時(shí)也增加了當(dāng)前網(wǎng)頁(yè)的大小。所以對(duì)“小”數(shù)據(jù)特別有好處。
data類(lèi)型Url的形式
既然是Url，當(dāng)然也可以直接在瀏覽器的地址欄中輸入。
data:text/html,<html><body><p><b>Hello, world!</b></p></body></html>
在瀏覽器中輸入以上的Url，會(huì)得到一個(gè)加粗的"Hello, world!"。
也就是說(shuō)，data:后面的數(shù)據(jù)直接用做網(wǎng)頁(yè)的內(nèi)容，而不是網(wǎng)頁(yè)的地址。
簡(jiǎn)單的說(shuō)，data類(lèi)型的Url大致有下面幾種形式。

復(fù)制代碼

代碼如下:

data:,<文本數(shù)據(jù)>
data:text/plain,<文本數(shù)據(jù)>
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圖片數(shù)據(jù)
data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)

因?yàn)閁rl是一種基于文本的協(xié)議，所以gif/png/jpeg這種二進(jìn)制屬于需要用base64進(jìn)行編碼。
換句話(huà)說(shuō)，引入base64以后，就可以支持任意形式的數(shù)據(jù)格式。
可以在Html的Img對(duì)象中使用，例如
<img src="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF..." />
可以在Css的background-image屬性中使用，例如

復(fù)制代碼

代碼如下:

div.image {
width:100px;
height:100px;
background-image:url(data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAF...);
}

可以在Html的Css鏈接處使用，例如

<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
可以在Html的Javascript鏈接處使用，例如

<script type="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的語(yǔ)法定義
在RFC中，完整的語(yǔ)法定義如下。

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的就是一般url中允許的字符，有些字符需要轉(zhuǎn)義，例如"="要轉(zhuǎn)義為"%3D"，不過(guò)我測(cè)試下來(lái)，至少在Firefox里面，不轉(zhuǎn)義也是可以的。

parameter可以對(duì)mediatype進(jìn)行屬性的擴(kuò)展，常見(jiàn)的是charset，用來(lái)定義編碼格式，在多語(yǔ)言情況下需要用到。例如下面的例子。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
這個(gè)例子會(huì)顯示出"你好，中文！"。如果吧charset部分去掉，就會(huì)顯示亂碼，因?yàn)槲矣玫氖荱TF-8編碼。

Firefox有一個(gè)data類(lèi)型Url的測(cè)試頁(yè)面，列出了各種格式的data類(lèi)型Url的測(cè)試Url，和測(cè)試結(jié)果說(shuō)明。

base64編碼和內(nèi)容的隱秘
把二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成為Base64不是什么難事，比如Total Commander就有這樣的功能。還有一些在線(xiàn)資源，

http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
有些在線(xiàn)轉(zhuǎn)換把base64里面的“=”轉(zhuǎn)換成為%3D，這個(gè)在Url中和“=”是一樣的，不轉(zhuǎn)換也沒(méi)什么問(wèn)題。

當(dāng)然，這種Url還有一種隱秘的好處，就是將一些道貌岸然者不喜歡的東西，堂而皇之的放在頁(yè)面上，例如下面
可以在Html的Css鏈接處使用，例如

<link rel="stylesheet" type="text/css"
href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />
可以在Html的Javascript鏈接處使用，例如

<script type="text/javascript"
href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>完整的語(yǔ)法定義
在RFC中，完整的語(yǔ)法定義如下。

dataurl := "data:" [ mediatype ] [ ";base64" ] "," data
mediatype := [ type "/" subtype ] *( ";" parameter )
data := *urlchar
parameter := attribute "=" value
urlchar指的就是一般url中允許的字符，有些字符需要轉(zhuǎn)義，例如"="要轉(zhuǎn)義為"%3D"，不過(guò)我測(cè)試下來(lái)，至少在Firefox里面，不轉(zhuǎn)義也是可以的。

parameter可以對(duì)mediatype進(jìn)行屬性的擴(kuò)展，常見(jiàn)的是charset，用來(lái)定義編碼格式，在多語(yǔ)言情況下需要用到。例如下面的例子。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
這個(gè)例子會(huì)顯示出"你好，中文！"。如果吧charset部分去掉，就會(huì)顯示亂碼，因?yàn)槲矣玫氖荱TF-8編碼。

Firefox有一個(gè)data類(lèi)型Url的測(cè)試頁(yè)面，列出了各種格式的data類(lèi)型Url的測(cè)試Url，和測(cè)試結(jié)果說(shuō)明。

base64編碼和內(nèi)容的隱秘
把二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成為Base64不是什么難事，比如Total Commander就有這樣的功能。還有一些在線(xiàn)資源，

http://www.greywyvern.com/code/php/binary2base64http://www.kawa.net/works/js/data-scheme/base64-e.html
有些在線(xiàn)轉(zhuǎn)換把base64里面的“=”轉(zhuǎn)換成為%3D，這個(gè)在Url中和“=”是一樣的，不轉(zhuǎn)換也沒(méi)什么問(wèn)題。

當(dāng)然，這種Url還有一種隱秘的好處，就是將一些道貌岸然者不喜歡的東西，堂而皇之的放在頁(yè)面上，例如下面的例子。

data:text/plain;charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB

這個(gè)例子會(huì)顯示出"你好，中文！"。如果吧charset部分去掉，就會(huì)顯示亂碼，因?yàn)槲矣玫氖荱TF-8編碼。

Firefox有一個(gè)data類(lèi)型Url的測(cè)試頁(yè)面，列出了各種格式的data類(lèi)型Url的測(cè)試Url，和測(cè)試結(jié)果說(shuō)明。

base64編碼和內(nèi)容的隱秘

把二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成為Base64不是什么難事，比如Total Commander就有這樣的功能。還有一些在線(xiàn)資源，

http://www.greywyvern.com/code/php/binary2base64

有些在線(xiàn)轉(zhuǎn)換把base64里面的“=”轉(zhuǎn)換成為%3D，這個(gè)在Url中和“=”是一樣的，不轉(zhuǎn)換也沒(méi)什么問(wèn)題。

當(dāng)然，這種Url還有一種隱秘的好處，就是將一些道貌岸然者不喜歡的東西，堂而皇之的放在頁(yè)面上。