跨浏览器让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


猜你喜欢
- 原理介绍keras是一种基于模块的高级深度学习开发框架,它并没有仅依赖于某一种高速底层张量库,而是对各种底层张量库进行高层模块封装,让底层库
- 1、获取秒级时间戳与毫秒级时间戳、微秒级时间戳import timeimport datetimet = time.time()print
- 一、普通进度条import sysimport time# 普通进度条# 在代码迭代运行中进行统计计算,并使用格式化字符串输出代码运行进度d
- 本篇博文主要讲解Python爬虫实例,重点包括爬虫技术架构,组成爬虫的关键模块:URL管理器、HTML下载器和HTML解析器。爬虫简单架构程
- mysql-proxy实现读写分离MySQL Proxy是一个处于你的client端和MySQL server端之间的简单程序,它可以监测、
- 本主题说明如何创建支持 FILESTREAM 的数据库。由于 FILESTREAM 使用一种特殊类型的文件组,因此,在创建数据库时,必须至少
- 环境准备Python3.6pip install Django==2.0.1pip install celery==4.1.0pip ins
- 1、python安装可以跨平台2、有两个版本2.7和3.6,第三方库适用2.7版,两个版本不兼容windows安装:第一种方法官网安装:在官
- 目录什么是异常?异常处理try-except 格式一-try...except...格式二-try...except {error
- 求和try: while True: n=input() s=1 for x in raw_input(
- smtp指令书接上文邮件实现详解,这里我们及我们简单复习一下smtp的指令如下:telnet smtp.163.com 25[outpout
- 博主PyQt5新手,最近在写一个可视化展示界面,第一个遇到的坑就是布局管理。其实可以不用相对布局,直接用QtDesigner进行傻瓜式的拖控
- 目录元组简单介绍声明元组元组与列表的区别特殊的元组元组的简写元组常见运算操作索引 [ ] 取值切片 [ : : ] 取值运算符 +运算符 *
- 本篇我们将以分析历史股价为例,介绍怎样从文件中载入数据,以及怎样使用NumPy的基本数学和统计分析函数、学习读写文件的方法,并尝试函数式编程
- 本文实例讲述了php简单生成随机字符串的方法。分享给大家供大家参考,具体如下:生成一组:<?php$str = "01234
- 一、表单验证form1、创建一个新的表单:<form id="id是唯一的,不可重复" name=“可重复”,me
- 在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌
- Sql Server 中一个非常强大的日期格式化函数: 获得当前系统时间,GETDATE(): 2008年01月08日 星期二 14:59
- 方法1:自定义异常# -*- coding:utf-8 -*-"""功能:python跳出循环"&q
- mysql数据库数据表和数据表关联--问题??用户数据表user 字词作品数据表article 短信 message外键ID 主键,之间的关