跨浏览器让javascript文件携带图片数据
发布时间:2011-03-31 17:12:00
现代浏览器可以基于RFC 2397标准使用base64把图片进行编码,然后输出类似data:image/png;base64,iVBORw0KGgoAA….的文本即可。RFC 2397标准制定与1998年,至今IE6、7仍不支持,如果想要实现文本携带图像数据,俄罗斯某大侠写了这么一篇文章:http://webo.in/articles/habrahabr/46-cross-browser-data-url/
文章指出可以利用mhtml协议方式把含有图片数据mht格式的文件链接进来,这个mht格式数据可以写到css、html或者js的注释中,引用的时候直接链接即可。
关于mht格式在百度百科中的定义:
mht是一种WEB电子邮件档案,能用浏览器打开的前提是你的机子上必须装有Outlook Express !在我们点菜单->文件->另存为…后在选择保存类型时可以看到有这一项,其最大优点是所保存的网页只有一个文件,便于管理。而以(*.htm;*.html)保存的网页,你会看到其实有一个网页和相应的一个文件夹,IE把页面元素分开存放了。说白了,该文件就是你从浏览器中看到的网页的全部。
MHT叫“web单一文件”。顾名思义,就是网页中包含得图片,CSS文件以及HTML文件全部放到一个MHT文件里面。mht就是mono html,就是独立的HTML文件,他是IE在save as时将页面中所有可以收集的元素全部存放在一个页面里,当然尺寸就大了啦,不过倒省却了相对路径绝对路径的烦心事。
下面我把“李小龙”的一张图片经过base64编码后嵌入javascript,例如:
/*
Content-Type: multipart/related; boundary="_ANY_STRING_WILL_DO_AS_A_SEPARATOR"
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR
Content-Location:%E5%94%90%E6%96%8C
Content-Transfer-Encoding:base64
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
*/
(function () {
var doc = document,
isMhtml = !-[1,] && !('prototype' in Image),
url = doc.getElementsByTagName('script'),
ajax = function (url, fn){
var XHR = new XMLHttpRequest();
XHR.onreadystatechange = function(){
XHR.readyState === 4 && XHR.status === 200 && fn(XHR.responseText);
};
XHR.open('GET', url, 1);
XHR.send(null);
},
setStyle = function (content) {
var style = doc.createElement('style');
doc.getElementsByTagName('head')[0].appendChild(style);
style.styleSheet && (style.styleSheet.cssText += content) || style.appendChild(doc.createTextNode(content));
};
url = url[url.length - 1].getAttribute('src', 4);
isMhtml ? setStyle('.dataUrlScheme{*background-image:url("mhtml:' + url + '!%E5%94%90%E6%96%8C")}') :
ajax (url, function (data) {
data = '.dataUrlScheme{background-image:url("data:image/png;base64,' + data.split('base64\r\n\r\n')[1].split('\r\n')[0] + '")}';
setStyle(data);
});
})();
我原来尝试使用js把MHT动态写入HTML文件中再引用页面地址,可是未能成功,所以只能静态嵌入到js文件中。
好了,是否这个例子值得jser无限遐想呢,或者又留下了什么遗憾呢?DEMO地址:
http://www.planeart.cn/demo/dataUrlScheme/
(兼容IE6/IE7/IE8/../Firefox/Chrome/Oprea/Safari 注意IE不能用IETeste调试)
我博客原文地址:http://www.planeart.cn/?p=1192
猜你喜欢
- FCKeditor是目前互联网上最好的在线编辑器,功能强大,支持IE 5.5+ (Windows), Fire
- 前言HTML 5如同一场革命,正在Web2.0后时代轰轰烈烈的进行着。HTML 5是什么,无须我在这里赘述了。对于HTML 5的革新,按我的
- 编者按,网站中让人惊喜的往往是那一点细节,只要用心留意你将发现那些美好的用户体验就在身边。新蛋网想自主控制链接在原窗口还是新窗口中打开?看看
- 一、密码式给数据库起一个随机复杂的名称,避免被猜到被下载,这种方式在以前很流行,因为大家都对自己的代码很有自信。但随着错误提示对数据库地址的
- 有个简单的方法,使用display:table, display:table-row and display:table-cell 就可以实
- 见下:<form action="./calculation.asp"><input&nbs
- 方案:◆1、SELECT TOP PAGESIZE NEWSTITLEFORM NEWSINFO WHERE NEWSID NOT IN(S
- Dim iSet conn=Server.CreateObject("ADODB.Connecti
- 解决MySQL中文乱码的问题看到从数据库中取出的数据全部是“?????”,太让人郁闷了。网上有很多方法来解决这个问
- 浏览带有下拉菜单的网页时,我们经常会注意到当更改显示器分辨率时,其下拉菜单的位置并没有改变,这也是我们设计网页时容易忽略的一个问题,其实通过
- 1:在终端下:mysql -V。 以下是代码片段:[shengting@login ~]$ mysql -Vmysql Ver 14.7 D
- 写过稍微大型一点 ASP 的人都知道,Session 这个对象真是好用,它可以用来记录使用者私有的资料变量,既安全又方便。但是你真的知道 S
- SQL Server查询速度慢的原因有很,常见的有以下几种:1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷)2、I/
- FLASH 全屏有二类四种:1、不用浏览器直接用FLASH播放器播放的类型:A、不显示FLASH播放器菜单栏的全屏(类似屏保效果),在第一帧
- 一、在访客的内心深处做导航我讨厌迷失,不管是在道路上或是在线网络上。猜想一下?您的访客也是这样的。就像我们期望看到的道路上的路标一样,来帮助
- 我们日常用CSS布局的时候,关于图片背景,大部分的人都是一个背景一张图片的,怎么说呢?这是很标准的方法,但是这种普通制作方式下要保存大量图片
- 如果你用SQL Server 2005 Management Studio建立函数或存储过程,你会注意到这些新窗口中都是模板。通常,你可以获
- 如何制作一个股票滚屏显示面板?<html> <head> <script
- 判断服务器是否安装了某种asp组件,比较常用的代码如下:代码如下:<% '功能:检查是否存在系统组件或组件是否安装成功
- 实例 1基本的XPath语法类似于在一个文件系统中定位文件,如果路径以斜线 / 开始, 那么该路径就表示到一个元素的绝对路径。/AAA选择根