Data URI scheme_PHP教程-php教程-PHP中文網

首頁

後端開發

php教程

Data URI scheme_PHP教程

Jul 13, 2016 am 10:28 AM

php

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

Data URI scheme is a URI scheme（统一资源定位符的模式）。

我们熟知的站点引用资源文件，都是类似http://www.chenwei.ws/demo.png这种的格式，但是data URI scheme 提供将外部资源嵌入到网页中的方法。

它是一种文件或文档的形式，这项技术允许普通的元素诸如要取的图片，样式表放在单一的http请求中，替代很多http请求。（相当于变成网页的一部分了）

------------------------------@author chenwei --------------------

用法=>

HTML:

1	`<span><</span><span>img </span><span>src</span><span>="data:image/png;base64,iVBORw0Rw0KGgoAA......"</span><span>></span>`

登入後複製

CSS:

1	`<span>div </span>{<span>background</span>:<span> red url('data:image/png</span>;<span>base64,iVBORw0Rw0KGgoAA......') no-repeat scroll left top;</span>}`

登入後複製

JavaScript:(IE8不支持)

<script><span>
window.open(</span>'data:text/html;charset=utf-8,' +<span> encodeURIComponent(
　　　　</span>'<!doctype html>' +
　　　　'html lang='en'<span> +
　　　　</span>'<head><title>Embedded Window</title></head>'<span> +
　　　　</span>'<body><h2 id="">42</h2></body>'<span> +
　　　　</span>'</html>'
<span>　　);
</span></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图片数据