Data URI scheme - 数据的uri模式
2016-09-30 14:04
295 查看
Data URI scheme is a URI scheme(统一资源定位符的模式)。
我们熟知的站点引用资源文件,都是类似http://www.chenwei.ws/demo.png这种的格式,但是data URI scheme 提供将外部资源嵌入到网页中的方法。
它是一种文件或文档的形式,这项技术允许普通的元素诸如要取的图片,样式表放在单一的http请求中,替代很多http请求。(相当于变成网页的一部分了)
用法=>
HTML:
CSS:
JavaScript:(IE8不支持)
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
Link: http://www.cnblogs.com/farwish/p/3787980.html
@黑眼诗人 <www.farwish.com>
我们熟知的站点引用资源文件,都是类似http://www.chenwei.ws/demo.png这种的格式,但是data URI scheme 提供将外部资源嵌入到网页中的方法。
它是一种文件或文档的形式,这项技术允许普通的元素诸如要取的图片,样式表放在单一的http请求中,替代很多http请求。(相当于变成网页的一部分了)
用法=>
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
Link: http://www.cnblogs.com/farwish/p/3787980.html
@黑眼诗人 <www.farwish.com>
相关文章推荐
- Data URI scheme - 数据的uri模式
- Data URI scheme 实现数据的URI访问
- Data URI scheme--数据的URI方案
- 使用 data URI scheme 在小组发言中内嵌图片
- 论基于数据访问的集合类(Data Access Based Collection)和领域事件(Domain Event)模式
- 架构模式数据源模式之:数据映射器(Data Mapper)
- PCI9054 突发模式数据传输 (burst mode data transfer )
- Data URI scheme
- Get data from specified URI using WebRequest and WebResponse(读取网页数据并存入对应html文档)
- 数据访问模式:数据并发控制(Data Concurrency Control)
- img标签中src包含data URL scheme-在一个URL中包含图片数据
- 论基于数据访问的集合类(Data Access Based Collection)和领域事件(Domain Event)模式 .
- http URI scheme与data URI scheme
- JS魔法堂:Data URI Scheme介绍
- 设计模式之美:Private Class Data(私有类数据)
- 使用 data URI scheme 在网页中内嵌图片[转]
- HOWTO: Include Base-64 Encoded Binary Image Data (data URI scheme) in Inline Cascading Style Sheets (CSS)(转)
- jqGrid单元格/行编辑模式下getRowData如何获取数据行
- 利用 Data URI Scheme进行XSS
- data URI scheme及其应用