-----------------------------------------------------------------------------------------------
Data URI scheme is a URI scheme(統一資源定位符的模式)。
我們熟知的站點引用資源文件,都是類似http://www.chenwei.ws/demo.png這種的格式,但是data URI scheme 提供將外部資源嵌入到網頁中的方法。
它是一種文件或文檔的形式,這項技術允許普通的元素諸如要取的圖片,樣式表放在單一的http請求中,替代很多http請求。(相當於變成網頁的一部分了)
------------------------------@author chenwei <www.chenwei.ws>--------------------
用法=>
HTML:
<img src="data:image/png;base64,iVBORw0Rw0KGgoAA......">
CSS:
div {background: red url('data:image/png;base64,iVBORw0Rw0KGgoAA......') no-repeat scroll left top;}
JavaScript:(IE8不支持)
<script> window.open('data:text/html;charset=utf-8,' + encodeURIComponent( '<!doctype html>' + 'html lang='en' + '<head><title>Embedded Window</title></head>' + '<body><h2>42</h2></body>' + '</html>' ); </script>
data 表示數據名稱,image/png 是數據類型名稱; base64 是數據編碼方法,後面是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圖片數據
注:PHP中可以用函數base64_encode()進行編碼,base64_encode(file_get_contents('demo.png'));
復制下面數據到浏覽器中,看看是什麼吧。
data:text/plain;base64,d3d3LmNoZW53ZWkud3M=
-----------------------------------------------------------------------------------------------
參考Wiki: http://en.wikipedia.org/wiki/Data:_URL