注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易邮箱前端技术中心

汇聚最新最劲爆的前端技术

 
 
 

日志

 
 
 
 

Data URI 备忘  

2012-05-05 17:13:27|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1、什么是Data URI
Data URI是由 RFC2397(http://tools.ietf.org/html/rfc2397)定义。
一种新的URL方案,允许小文件将其数据直接嵌入于文档之中,就如同在外部将其引用进来。

2、Data URI的语法

data:[<mediatype>][;base64],<data>

[<mediatype>]
可选,用于指定数据的MIME,语法为[type]/[subtype]; parameter,例:text/html,image/gif等。省略的话,默认text/plain;charset=US-ASCII
[;base64]
可选,如果不设置为base64,默认即为带%的编码,也就是URLencode
<data>
数据的内容,必须与[;base64]设置的编码格式相对应。即设置了[;base64]的,使用base64编码后的数据。不设置,则使用默认即为带%的ASCII编码。

3、Data URI在Web前端开发中的应用
使用Base64编码嵌入的数据,编码后的数据比原始数据略长,为原来的4/3。参考(http://zh.wikipedia.org/wiki/Base64
故在Web前端开发中,Data URI一般用于小图片、小图标的直接嵌入。

国内外也对此技术的优缺点有了较多的结论,这里列举了几篇参考的内容。

总结以上文章与现状,使用DATA URI技术,需要注意的是:
1、IE8只能支持32768字符以内的DATA URI资源。这意味着,如果不区分浏览器处理,务必确保生产环境中的资源处在于这个限制之内。
2、以上文中提及的MHTML引用的方法,由于微软发布了MHTML 中的漏洞可能允许信息泄露补丁,将造成非本地MHTML无法引用的问题,所以MHTML兼容方法,不可在生产环境中继续使用。
3、支持DATA URI的浏览器的判断,除了对IE6、IE7的浏览器UA进行解析。也可以使用脚本的方法,直接判断image对象是否支持DATA URI的加载,从而为后续处理提供判断。

<script>
//检测Data Uri
var oImg = new Image();
oImg.onload = function(){
alert('我支持data uri');
};
oImg.onerror = function(){
alert('我不支持data uri');
}
oImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
</script>

4、虽然IE的对DATA URI支持有限制(参考data Protocol),仅限于object(images only)、img、input type=image、link、CSS中的URL,但在其他现代浏览器中,我们可以通过DATA URI,来集成更多的内容。比如,我们可以这样指定一个iframe的内容。

iframe.src = 'data:text/html;base64,PCFkb2N0eXBlIGh0bWw+DQo8aHRtbD4NCgk8aGVhZD4NCgkJPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1UeXBlIiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9Z2IyMzEyIiAvPg0KCQk8bWV0YSBuYW1lPSJkZXNjcmlwdGlvbiIgY29udGVudD0iIiAvPg0KCQk8dGl0bGU+aGFoYTwvdGl0bGU+DQoJPC9oZWFkPg0KPGJvZHkgc3R5bGU9ImJhY2tncm91bmQ6IzAwMDsiPg0KCTEyMzEyMw0KPC9ib2R5Pg0KPC9odG1sPg==';


期待此技术在生产环境中的应用。

By Seem
  评论这张
 
阅读(1897)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017