程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> Data URI scheme

Data URI scheme

編輯:關於PHP編程

-----------------------------------------------------------------------------------------------

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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved