Data URI scheme - 数据的uri模式

最新推荐文章于 2022-04-20 15:23:46 发布

dilunzhuang0924

最新推荐文章于 2022-04-20 15:23:46 发布

阅读量139

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/farwish/p/3787980.html

版权

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

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

我们熟知的站点引用资源文件，都是类似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>

转载于:https://www.cnblogs.com/farwish/p/3787980.html

dilunzhuang0924

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Data URI scheme - 数据的uri模式

-----------------------------------------------------------------------------------------------Data URI scheme is a URI scheme（统一资源定位符的模式）。我们熟知的站点引用资源文件，都是类似http://www.chenwei.ws/demo.png这种的格...
复制链接

扫一扫