【转】DataURL在Web浏览器中的兼容性总结

  1. IE8+,Firefox,Chrome,Opera,Safari 等现代浏览器普遍支持data URL
  2. IE8 data URL 最大长度限制为32k字节,超出无效。IE9+没有这个限制
  3. IE只识别base64编码或百分号编码(URL编码, encodeURIComponent)的data URL,IE不识别无编码的data URL,非IE浏览器可识别无编码的data URL
  4. IE不支持对<iframe>,<frame>标签的src设置data URL
  5. IE官方说法说data URL仅支持以下5种使用场景:
    • object (images only)
    • img
    • input type=image
    • link
    • CSS declarations that accept a URL
  6. 据本人实测,IE也在除了官方所述5种之外的其它场合支持data URL:
    1. a href
    2. meta refresh. 示例:

      [html] view plain?

      1. <meta http-equiv="refresh" content="5;URL=data:text/html;base64,xxxx....">
    3. script src
    4. window.open
    5. embed src
  7. 对于audio, video一类的元素,往往资源文件较大,使用data URL并不常见,我也没有对其进行测试。
  8. Firefox中粘贴截图是直接转换为data URL的图片,其它浏览器干脆无法粘贴,我记得以前Chrome好像可以粘贴截图的,今天再测Chrome,Opera都不能粘贴截图(<div contenteditable></div>做的测试).   (粘贴截图常用于在线富文本编辑器)
  9. 可为data URL指定字符集编码。示例:data:text/plain;charset=US-ASCII,xxxx....

附录:

DataURL语法规则:

       dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
       mediatype  := [ type "/" subtype ] *( ";" parameter )
       data       := *urlchar
       parameter  := attribute "=" value

DataURL规范:rfc2397

维基百科词条:Data URI scheme

最好的在线生成DataURL网站:Data Url Maker  页面简洁,支持文件拖放,支持对指定网址的CSS文件做data URL优化。

from:http://blog.csdn.net/cuixiping/article/details/14215947

时间: 2024-10-04 23:50:35

【转】DataURL在Web浏览器中的兼容性总结的相关文章

JavaScript权威指南第13章 web浏览器中的javascript

13.1 客户端javascript window对象是所有的客户端javascript特性和api的主要接入点.表示浏览器的一个窗口,可以通过window对象来引用它. window 的方法 alert() prompt() confirm() 13.2 在html里嵌入javascript 4种方法: 内联:放置在<script></script>标签之中 外部引入:<script src="   "></script> html程序

第十一章:WEB浏览器中的javascript

客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节同样涵盖重要的web应用所需要的网络编程API.本地存储和检索数据.画图等.主要包含内容有以下章节: web浏览器中的javascript / window对象 /  脚本化文档 /  脚本化css / 事件处理 / 校本化http / jQuery类库 / 客户端存储  /  多媒体和图形编程 /

Web浏览器中的JavaScript(一)

外部引入js脚本的优点: 1)  可以把大块的Js代码从html文件中删除,这有助于保持内容和行为的分离,从而简化html文件. 2)  如果多个Web页面公用相同的JavaScript代码,用src属性可以让你只管理一份代码,而不用在代码改变时编辑每个html文件 3)  如果一个JavaScript代码文件由多个页面共享,就只需要下载它一次,通过使用它的第一个页面--随后的页面可以从浏览器缓存检索它 4)  由于src属性的值可以使任意的url,因此来自一个Web服务器的JavaScript

Web浏览器中的JavaScript(二)

客户端Javascript时间线: 1)  Web浏览器创建Document对象,并开始解析Web页面,解析html元素和它们的文本内容后添加Element对象和Text节点到文档中.在这个阶段documen.readystate属性值是"loading" 2)  当HTML解析器遇到没有async和defer属性的<script>元素时,它把这些元素添加到文档中,然后执行行内或外部脚本.这些脚本会同步执行,并且在脚本下载(如果需要)和执行时解析器会暂停.这样脚本就可以用d

《Javascript权威指南》 Web浏览器中的JavaScript

URL中的JavaScript 在URL后跟一个javascript:协议限定符,是一种嵌入javascript代码到客户端的方法.这种特殊的协议类型指定URL内容为任意字符串,这个字符串是会被javascript解析器运行的javascript代码.它被当做单独的一行代码,语句之间必须用分号隔开,注释用/**/.javascript:URL能识别的“资源”是转换成字符串的执行代码的返回值.如果代码返回undefined,那么这个资源是没有内容的. 可以在使用常规URL的任意地方:<a>的hr

百度editor富文本编辑器在火狐浏览器中的兼容性

最近做项目的时候遇到了百度的一个神器:editor富文本编辑器.但是也遇到了很多兼容性的问题,现在写一段随笔一起分享一下: 第一:在火狐浏览器中,该编辑器部分的编辑功能按钮不能显示 可以看出,在火狐浏览器中只会显示编辑框,而上面的编辑按钮缺没有.(但是在IE7,IE8上不能显示的原因在于新版本中屏蔽了 anonymous()方法,可以通过修改eWebEditor的JS文件来修正错误) 解决方案:打开火狐-->工具栏-->“工具”-->"添加附件",使用搜索功能来搜索“

Web浏览器中动态添加修改HTML页面代码的问题分析

引言:在Web的世界里,浏览器加载页面,展示给用户最终的内容,可是最终展示的HTML代码与服务器上存储的代码一致吗? 1.  xpath为什么不能正常工作? XPath是用来快速定位页面元素的方式和方法,忽然有一天,发现在页面中截取的XPath在代码的匹配中是无法工作的,那问题出在哪里呢? 页面地址:http://www.66ip.cn/ 截取匹配页面中的IP地址,基于Chrome浏览器自带的开发者工具,我们截取到某一个匹配的XPath路径为: //*[@id="main"]/div/

web浏览器中javascript

1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; // 找到head节点 var s = document.createElement("script"); // 创建一个script标签 s.src = url; // 设置一个src属性 head.appendChild(s); // 插入标签到head节点中}2.事件驱动javas

cssRules在不同浏览器中的兼容性

在一份HTML文档中可以用三种方式添加样式信息: 1.通过<link>元素引用外部样式表: 2.通过<style>元素在文档的头部添加样式信息: 3.在具体的文档元素上通过style特性指定样式信息. 对于第三种样式信息可以在DOM中通过元素节点的style属性进行操作. 对于前两种样式信息在DOM中要通过CSSStyleSheet对象的属性和方法进行操作. CSSStyleSheet对象有一个官方文档规定的cssRules属性,表示样式表中(上述前两种样式表)的样式规则的集合(每