1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
---
title: Data URLs
slug: Web/HTTP/data_URIs
tags:
- Base64
- HTTP
- URL
- 教程
- 进阶
translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs
---
<div>{{HTTPSidebar}}</div>
<p><strong>Data URLs</strong>，即前缀为 <code>data:</code> 协议的URL，其允许内容创建者向文档中嵌入小文件。</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<p>Data URLs 由四个部分组成：前缀(<code>data:</code>)、指示数据类型的MIME类型、如果非文本则为可选的<code>base64</code>标记、数据本身：</p>
<pre class="syntaxbox">data:[<mediatype>][;base64],<data>
</pre>
<p><code>mediatype </code>是个 MIME 类型的字符串，例如 "<code>image/jpeg</code>" 表示 JPEG 图像文件。如果被省略，则默认值为 <code>text/plain;charset=US-ASCII</code></p>
<p>如果数据是文本类型，你可以直接将文本嵌入 (根据文档类型，使用合适的实体字符或转义字符)。如果是二进制数据，你可以将数据进行base64编码之后再进行嵌入。</p>
<p>下面是一些示例：</p>
<dl>
<dt><code>data:,Hello%2C%20World!</code></dt>
<dd>简单的 text/plain 类型数据</dd>
<dt><code>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</code></dt>
<dd>上一条示例的 base64 编码版本</dd>
<dt><code>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</code></dt>
<dd>一个HTML文档源代码 <code><h1>Hello, World</h1></code></dd>
<dt><code>data:text/html,<script>alert('hi');</script></code></dt>
<dd>一个会执行 JavaScript alert 的 HTML 文档。注意 script 标签必须封闭。</dd>
</dl>
<h2 id="Encoding_data_into_base64_format" name="Encoding_data_into_base64_format">给数据作 base64 编码</h2>
<p>在Linux或者Mac OS系统上，你可以使用 <code>uuencode </code>命令行工具来简单实现编码：</p>
<pre class="eval">uuencode -m <code>infile</code> <code>remotename</code>
</pre>
<p><code>infile</code> 参数表示要作 base64编码的文件名称，<code>remotename</code> 参数表示输出的文件名称, 实际上并没有在 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">data</span></font> 方案的URLs 中使用。</p>
<p>输出结果如下：</p>
<pre class="eval">begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====
</pre>
<p>以上 Data URL 会使用位于首行之后的编码后的数据</p>
<h3 id="在网页上使用_JavaScript">在网页上使用 JavaScript</h3>
<p>Web APIs 已经有对 base64 进行编码解码的方法: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a>.</p>
<h2 id="Common_problems" name="Common_problems">常见问题</h2>
<p>下文介绍一些在使用<code>data</code> URIs时遇到的常见问题:</p>
<dl>
<dt>语法</dt>
<dd><code>data</code> URLs 的格式很简单，但很容易会忘记把逗号加在 "data" 协议名后面，在对数据进行 base64 编码时也很容易发生错误。</dd>
<dt>HTML代码格式化</dt>
<dd>一个 <code>data</code> URL 是一个文件中的文件，相对于文档来说这个文件可能就非常的长。因为 data URL 也是 URL，所以 data 会用空白符(换行符, 制表符, 空格)来对它进行格式化。但如果数据是经过 base64 编码的，就可能会<a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12" title="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">遇到一些问题</a>。</dd>
<dt>长度限制</dt>
<dd>虽然 Firefox 支持无限长度的 <code>data</code> URLs，但是标准中并没有规定浏览器必须支持任意长度的 <code>data</code> URIs。比如，Opera 11浏览器限制 URLs 最长为 65535 个字符，这意味着 data URLs 最长为 65529 个字符（如果你使用纯文本 data:, 而不是指定一个 MIME 类型的话，那么 65529 字符长度是编码后的长度，而不是源文件）。</dd>
<dt>缺乏错误处理</dt>
<dd>MIME类型错误或者base64编码错误,都会造成<code>data</code> URIs无法被正常解析, 但不会有任何相关错误提示.</dd>
<dt>不支持查询字符串</dt>
<dd>
<p>一个data URI的数据字段是没有结束标记的,所以尝试在一个data URI后面添加查询字符串会导致,查询字符串也一并被当作数据字段.例如:</p>
<pre class="eval">data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val
</pre>
<p>这个 data URL 代表的 HTML 源文件内容为:</p>
<pre class="eval">lots of text...<p><a name="bottom">bottom</a>?arg=val
</pre>
</dd>
</dl>
<h2 id="Support_in_other_browsers" name="Support_in_other_browsers">浏览器兼容性</h2>
<p>{{compat("http.data-url")}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Title</th>
</tr>
<tr>
<td>{{RFC("2397")}}</td>
<td>The "data" URL scheme</td>
</tr>
</tbody>
</table>
<h2 id="Resources" name="Resources">相关链接</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
<li>{{domxref("WindowBase64.atob","atob()")}}</li>
<li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/URI">URI</a></li>
</ul>
|
