返回列表

data uri 和 mhtml base64 data:image/gif;base64

默认分类 2014/05/15 02:21

原文地址:http://hikejun.com/demo/css/data-uri.html
http://ued.taobao.org/blog/2009/10/data-uri-try/
http://www.aoao.org.cn/blog/2010/01/fixed-mhtml-ie7-vista/
本地Demo地址:http://haiyang.me/datauri_mhtml/data-uri.html

data-uri-demo.css

/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:bg1
Content-Transfer-Encoding:base64

R0lGODlhFAAUAJEAAP/13ImwicTTs8TSsiH5BAAAAAAALAAAAAAUABQAAAJVjA2pC9ca2pkxiArGs/xeiSUV5XCPFjFMCZFT80WoCoGPmOXabMo3PQqBXKnWC7egrHLBX2L3q8R0Sx6iOETgeseaFStibWMTD+YL47yK0qDWeH0rCgA7
*/
body,
.compat-mode body{background: url(data:image/gif;base64,R0lGODlhFAAUAJEAAP/13ImwicTTs8TSsiH5BAAAAAAALAAAAAAUABQAAAJVjA2pC9ca2pkxiArGs/xeiSUV5XCPFjFMCZFT80WoCoGPmOXabMo3PQqBXKnWC7egrHLBX2L3q8R0Sx6iOETgeseaFStibWMTD+YL47yK0qDWeH0rCgA7);}

body {
    *background:url(mhtml:http://hikejun.com/demo/css/data-uri-demo.css!bg1);
}



.mod{zoom:1;overflow:hidden;}
.mod .hd{position:absolute;top:0;left:0;width:100%;height:100%;_height:100em;background:#FFF;opacity:0.6;filter:alpha(opacity=60);}
.mod,.mod .bd{position:relative;z-index:1;padding:20px;}

data-uri.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Data URI</title>
<link rel="stylesheet" href="data-uri-demo.css" type="text/css">
<script type="text/javascript">
window.onload = function () {
    // 超坑的IE8兼容模式,居然识别*background: 
    if (/trident\/\d/i.test(navigator.userAgent)) {
        document.body.parentNode.className = 'compat-mode';
    }
};

</script>
</head>
<body>
    <div class="mod">
    <div class="hd"></div>
        <div class="bd">
    看了Stoyan的两篇文章:<br>
    <a href="http://www.phpied.com/data-urls-what-are-they-and-how-to-use/" target="_blank">http://www.phpied.com/data-urls-what-are-they-and-how-to-use/</a><br>
    <a href="http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/" target="_blank">http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/</a><br>

    <p>
    <a href="data-uri-demo.css">查看CSS</a>。本例的背景就是通过data URI方式。通过mhtml支持IE6/7。
    </p>
    <p>
    用data URI的方式最大好处是减少HTTP请求。最大坏处经过Base64编码字符串很大。最好权衡着用。MHTML也是个老玩意IE很早就支持,保存页面为"Web档案"时就是这东西。没想到还可以这么应用 :)
    </p>
    </div>
    </div>
</body>
</html>

下载地址:

Kejun的原始示例haiyang.me/datauri_mhtml/data_uri(ok1).rar
处理IE8兼容模式haiyang.me/datauri_mhtml/data_uri(ok2).rar
带旺旺点灯JS源文件haiyang.me/datauri_mhtml/data_uri(ok3).rar