4.12. 在没有服务器的情况下添加图片 [深入浅出 Greasemonkey]

4.12. 在没有服务器的情况下添加图片

Firefox 支持 data: URLs, 它可以把一段数据嵌入到 URL 中，而不需要单独从服务器上来获取。您也许从来都没有听说过 data: URLs ，因为 Internet Explorer 不支持，所以几乎没人使用它们。但是在用户脚本中它们却非常有用。

例 4.15. 在页面顶部添加图形 logo

var logo = document.createElement('img');
logo.src = 'data:image/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA'+
'LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D';
document.body.insertBefore(logo, document.body.firstChild);

在这个例子中，<img> 元素的 src 是 data: URL，它以编码形式的包含了一整幅图像的信息。当这个新元素被插入到页面中时，它会像其他图片一样显示但它却不用存储在服务器上。事实上，可以在您的用户脚本中嵌入图片，它们可以和其它的代码一样发布到网上。

使用 data: URI kitchen 来建立您自己的 data: URLs。

实例

参见

data: URI kitchen

← 快速插入复杂的 HTML

添加 CSS 样式 →