脚本宝典收集整理的这篇文章主要介绍了Data URI和MHTML完整解决所有浏览器,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Data URI
Data URI 是由 RFC 2397 定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中:
data:[<mIME-tyPE>][;base64],<data>
在上个世纪 HTML4.01引入了Data URI方案 ,到今天为止除了IE6和IE7之外,所有主流浏览器都支持,但IE8对Data URI的支持还是有限制的,只支持object(仅是图片时)、img、input type=image、link和CSS中的URL,且数据量不能大于32K。
优点:
缺点:
MHTML
MHTML是MIME HTML (Multipurpose Internet Mail Extension HTML)的缩写,是由Rfc 2557定义的把一个多媒体的页面所有内容都保存到同一个文档解决方案。这个方案是由微软提出从IE5.0开始支持,另外opera9.0也开始支持,Safari可以把文件保存为.mht(MHTML文件的后缀)格式,但不支持显示它。
MHTML和Data URI还比较类似,有更强大的功能和更复杂的语法,并且没有Data URI中“无法被重复利用”的缺点,但MHTML使用起来不够灵活方便,比如对资源引用的URL在mht文件中可以是相对地址,否则必须是绝对地址。hEdger在《Cross Browser Base64 Encoded Images Embedded in HTML》针对IE的解决方案使用的是相对路径就是因为声明了Content-type:message/rfc822使IE按照MHTML来解析,如果不修改Content-type则需要使用MHTML协议,这个时候必须使用绝对路径,如《MHTML – when you need data: URIs in IE7 and under》。
应用
Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器,它们由于无法被缓存和重复利用的缺陷,所以并不适合直接在页面中使用,但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性:
为了方便在CSS中实现Data URI和MHTML,我写了一个Data URI & MHTML 生成器,你可以看利用其生成Data URI & MHTML应用实例。
在CSS文件中使用应用MHTML时URL必须使用绝对路径,导致非常不灵活,所以可以考虑使用CSS exPression来解决(DEMO),比如:
/*
http://old9.blogsome.COM/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-From-html/
*/
*background-image:expression(function(ele){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(this));
以上是脚本宝典为你收集整理的Data URI和MHTML完整解决所有浏览器全部内容,希望文章能够帮你解决Data URI和MHTML完整解决所有浏览器所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。