孟村网站建设,百度大全下载,贴图库wordpress,网店装修教程免费模板一、初识Data URL数据URL是带有前缀的URL#xff0c;data:可以将小文件直接嵌入文档中。data URL是一种特殊格式的url#xff0c;它的前缀是data:data URL允许内容的创建者将小文件嵌入在documents中过去被叫做data URIs#xff0c;直到WHATWG将其更名为data URL(s)data URL…一、初识Data URL数据URL是带有前缀的URLdata:可以将小文件直接嵌入文档中。data URL是一种特殊格式的url它的前缀是data:data URL允许内容的创建者将小文件嵌入在documents中过去被叫做data URIs直到WHATWG将其更名为data URL(s)data URL与传统的url有什么区别现代浏览器将data url视作唯一的不透明来源而不是负责导航的url。如何理解这句话呢看一下这个例子// data URLdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII// 传统的URLhttps://www.google.com由上面的结果可以看出data URL与传统的url不同。传统的url在浏览器地址栏中输入可以直接导航到目标地址而data URL则是一个data的url表现可以理解为用url代表数据。二、data URL语法data URL由哪四部分组成data:[][;base64],组成含义data:前缀[][;base64]可选的base64标识数据本身[]详情mediatype是一个MIME type的字符串比如image/jpeg。如果忽略的话默认是text/plain;charsetUS-ASCII。canvas.toDataURL()并没有忽略默认MIMIE type为image/png。[;base64]和详情如果data是纯文本你可以简单的嵌入文本(根据document类型使用适当的实体或者转义)。如果data不是纯文本的话可以标识为base64并且嵌入base64编码的二进制数据。常见的data URL形式简单的text/plain数据简单的text/palin数据的base64形式HTML片段普通标签HTML片段执行js的script标签简单的text/plain数据Hello World!data:,Hello%2C%20World! // MIME type和;base64都没有data和数据间只有:,注意引号和空格的percent-encoding(URL-encoding)。对于CSV数据(”text/csv“)percent-encoding需要保留分隔电子表格行的行尾。简单的text/palin数据的base64形式Hello World!data:text/plain;base64,SGVsbG8sIFdvcmxkIQHTML片段普通标签Hello, World!data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3EHTML片段执行js的script标签data:text/html,执行js的script标签注意闭script标签是需要的。三、data URL常见问题罗列一些在创建和使用data URL时的常见问题。data:text/html,lots of text...bottom?argval其实它代表的是lots of text...bottom?argval语法HTML中的格式长度限制异常处理的缺失不支持字符串查询安全问题语法data URL的格式非常简单很容易忘记在data前面添加一个逗号或者是错误的将数据编码为base64格式。HTML中的格式data URL在文件中提供了一个文件这个文件相对于闭文档的宽度可能非常宽。作为一URLdata应该将空白格式化好(换行、tab、或者空格)但是在使用base64编码时会有一些问题。长度限制尽管firefox支持无现场的data URL长度但是浏览器不需要支持任何最大特定长度的数据。例如Opera 11浏览器将URL的长度限制到65535data URL限制到65529(65529指的是base64 encoded后的长度)。主流浏览器data URL长度限制Chrome - 2MB for the current document. Otherwise the limit is the in-memory storage limit for - arbitrary blobs: if x64 and NOT ChromeOS or Android, then 2GB; otherwise, total_physical_memory / 5 (source).Firefox - unlimitedIE ≥ 9 Edge - 4GB异常处理的缺失media的无效参数或者‘base64’排版错误都会被忽略但是不会报错出来。不支持字符串查询data URL的数据部分是不透明的所以如果使用query string(比如?parameter-data)去查询时将只在数据中包含URL的查询字符串。也就是说查询无效query也会被当做数据的一部分。安全问题许多安全问题(如网络钓鱼)都与data url相关并在浏览器的顶层导航到它们。为了解决这些问题在Firefox 59中(发布版本从58开始)对数据的顶层导航data:// urls已经被禁止。更多
