22

我在使用带有 IE 版本 6-9 的 RFC 2397 数据 url 方案时遇到问题。下面的示例代码在使用当前版本的 Safari、FF、Opera 和 Chrome 时可以正常工作。

data:text/html;base64,PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDt1cmw9aHR0cDovL2dvb2dsZS5jb20vIj4g

或者

data:text/html,%3Cmeta%20http-equiv%3D%22refresh%22%20content%3D%220%3Burl%3Dhttp%3A//google.com/%22%3E%20

如果上面的代码粘贴到几乎任何浏览器（不包括 IE）中，它将导航到 google.com，当尝试使用 IE 时，它会失败并出现以下错误。

网页无法显示

最可能的原因：

  • 此网页上的某些内容或文件需要您未安装的程序。

你可以尝试什么：

在线搜索可用于查看此 Web 内容的程序。

重新输入地址。

检查生成的 IE 错误页面的页面源时，有一个引用文件关联和协议的链接。

协议类型：

描述：未知

Windows 无法识别此协议。

我意识到使用 data: 协议可能不是最直接的，或者在大多数情况下不是最好的选择，但我必须将它用于这个特定的项目。

我已经到处寻找解决方案并尝试了许多使用 IE 的示例，希望这是我的语法，但尚未找到解决方案。

4

6 回答 6

24

数据 URI 不能用于导航、脚本或填充 IE 中的框架或 iframe 元素。

根据http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx：

仅以下元素和/或属性支持数据 URI。

object (images only)
img
input type=image
link
CSS declarations that accept a URL, such as background, backgroundImage, and so on.

数据 URI 可以嵌套。

出于安全原因，数据 URI 仅限于下载的资源。数据 URI 不能用于导航、脚本或填充框架或 iframe 元素。

数据 URI 不能超过 32,768 个字符。

资源数据必须正确编码；否则，会发生错误，并且不会加载资源。“#”和“%”字符以及控制字符、非美国 ASCII 字符和多字节字符必须进行编码。

有关详细信息，请参阅 RFC2397：“数据”URL 方案。

从 Windows Internet Explorer 8 或更高版本开始提供。**

于 2011-12-10T01:18:56.330 回答
16

对我来说，寻找document.execCommand是救命稻草。它使用了iFrame与其他一些示例类似的内容，但execCommand使Save As功能保持一致。

这是一个例子

var getCsvFileForIE = function(target) {
  var csvData = target.attributes["data-csv"].value;
  if (navigator.appName === "Microsoft Internet Explorer") {
    csvData = decodeURIComponent(csvData);

    var iframe = document.getElementById('csvDownloadFrame');
    iframe = iframe.contentWindow || iframe.contentDocument;

    csvData = 'sep=,\r\n' + csvData;

    iframe.document.open("text/html", "replace");
    iframe.document.write(csvData);
    iframe.document.close();
    iframe.focus();
    iframe.document.execCommand('SaveAs', true, 'data.csv');
  } else {
    if (console && console.log) {
      console.log('Trying to call getCsvFileForIE with non IE browser.');
    }
  }
};

我们为 IE 和所有其他浏览器执行此操作，我们使用标准数据 URI 链接。您可以查看完整的要点以获取更多详细信息。向Andrew Blondeau 致敬。

更新

确定浏览器是否支持数据 URI 的更好方法

supportsDataUri = 'download' in document.createElement('a');

似乎 IE 仍然遇到问题。对于 IE10+，您可能需要使用msSaveOrOpenBlob，对于 IE8/9，您仍然需要execCommand在iFrame.

更新 2

检测数据 uri 方案存在Modernizr 问题。它引用了另一个 SO 答案。一定要检查这些。

于 2014-09-23T19:39:13.523 回答
12

Internet Explorer 确实支持数据 URI（资源有点过时）。它有一些安全考虑，但可以防止它允许恶意尝试重定向用户，或者允许黑客在不需要 3rd 方脚本或托管资源的情况下进行网络钓鱼。

这意味着您可以将它与 JavaScript 一起使用：

<script src="data:text/javascript;base64;YWxlcnQoIldvcmtzIik7"></script>

级联样式表（带或不带 base64 编码）：

<link rel="stylesheet" href="data:text/css;base64,Ym9keXtjb2xvcjpncmVlbn0=">
<link rel="stylesheet" href="data:text/css,body%7Bcolor:green%7D">

甚至图像：

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBgRXhpZgAASUkqAAg
AAAACADEBAgAHAAAAJgAAAGmHBAABAAAALgAAAAAAAABQaWNhc2EAAAMAAJAHAAQAAAAwMjIwAqAEAAE
AAAAbAAAAA6AEAAEAAAAbAAAAAAAAAP/bAIQAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwo
LCw0OEhANDhEOCwsQFhARExQVFRUMDxcYFhQYEhQVFAEDBAQFBAUJBQUJFA0LDRQUFBUUFBQUFBQUDxQ
QFBUUExUVFBQUEBUUFQ4UFBQUEhISDxURFQ8SFRQSEBAQDQ8P/8AAEQgAGwAbAwERAAIRAQMRAf/EABg
AAAMBAQAAAAAAAAAAAAAAAAUHCAIG/8QAKxAAAQMDAwMDAwUAAAAAAAAAAQIDBAUGEQASIQciMQgTFEF
RgRVhcaHD/8QAGQEAAwEBAQAAAAAAAAAAAAAABAUGBwMC/8QALxEAAQMCAgcHBQEAAAAAAAAAAQACAwQ
RBSESMUFRYZHBEyJxobHR4RVDgfDxFP/aAAwDAQACEQMRAD8AGdeKdd3Um670bjz0waNQpzVKpVOWtSE
uqSgKefIztKipQwSOU4wRjuBq6tj52h2YTbA8Nkp6UmMaLzzS1sz0ru1qqNyrkrqWIiMrfjsjctw4HGT
wM/ngaEmxJjBaNqdRYPJpaczr8FTXRY1h7p9dVg1GpSZzNBkobYcec3qfgup9xjefqUqQ4n+ED651RYf
Utla2UjMKBx6hdTvdEw2ac7JR13psz+rytkUqTv8AITq1bVZDNZo6ncCQFYFH9O1vS+lVrOW1bD0REtl
uW8hi45Ty0hSAUkOrKlLyNvA27eBnCdZbUxNv3GjkFudDWvved55k9QpI9S0y7ujfqUk2jZ4bcaetuFP
MSSFyENrW84h1zevcvOEgZzj9hnQ76aAQh0+Wezw1JjR1dVPO5kJuNxJ360Stj1LU/ooqREuuA9Krs4s
LqM2A0lbDSACG0kDlRTlZKUjHJx5xplhjWui7mq+Xkk2PhxqgDrDRfxuUmL89awuO8KrUU202lDz3Z7K
vbSpIASlW3ZwSACR9ydUsc/ZtDBs4qLkw4TPMjjmeCGSurEun2rRqJBvStJq5U6iSiLUZHx0BKRtQ2pT
hJwPBASnggDxqUjDzdxBtx+PlaTpQEhha38DqegCM2PdL6apMrkyHKn1FuIiOuoyCpbiEA57nFLVkcnC
OAST4OgqqMygMLsr6lQUZigvIxlstdv3pdbqsGy7nn1ym3pcEy3am06hwvsKZMYtrYQUZK1pVu2r5SkK
APPGjIJXQQt7Jml/VJ4lCKmre50lj8JYVDopYQmu/GviZJYz2OtQS6lQ+4UlZB/B16+oz7YDzCB/wsH3
fJIx+W8qRKWXFbxIUQrPPCiB/QGmLNQQriS4lODo1Mk1/qBQaJUJcmVSXJrYXEW+v21dw8gHnQNaBHA6
Ros62tOaKV8kjY3OJbuWrXkya/wBV6z8ubMCn1y1OLjSnI61YXwNzaknaMDtzjgccDXKoPZUzdEDZsB9
UFGTJO7SO/wBV0kq3mRIcHzaue4+axLP+uk/bO3DkPZMxE3jzPuv/2Q==">

但是，您不能将它们与window.openor一起使用iframe，因为它们会导致一些非常危险的事情，包括使用 Data URIs 进行网络钓鱼：

<iframe src="data:text/html;base64,PGJ1dHRvbiBpZD0iX3BheXBhbCI+TG9nIGludG8gUGF5cG
FsPC9idXR0b24+DQo8c2NyaXB0Pg0KICAgIF9wYXlwYWwuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCB
mdW5jdGlvbiAoKSB7DQogICAgICAgIGFsZXJ0KCJUaGlzIGNvdWxkIGhhdmUgYmVlbiB1Z2x5IGZvciB5
b3UuLi4iKTsNCiAgICB9LCBmYWxzZSk7DQo8L3NjcmlwdD4="></iframe>

最后一个示例很可能是 PayPal 登录屏幕的完整复制品。相反，它只是一个带有事件处理程序绑定并监听点击的 HTML 按钮。类似的黑客行为可能来自window.open：

window.open("data:text/html;base64,PHN0cm9uZz5XQVQhPzwvc3Ryb25nPg==", "OHAI");

因此 Internet Explorer 10 支持此功能，但它可以保护最终用户免受恶意使用它的人的侵害。我敢肯定，如果微软确定了一种更好的方法来保护他们的用户群，他们会很乐意解除这一限制。

在事情发生变化之前，您需要找到另一种方法来包含您的 FLV 文件。在旁注中，您可能不想在 Stack Overflow 上从您的应用程序中共享这样的实际数据。

于 2013-05-07T00:58:11.753 回答
6

根据佛朗哥在这里的回答：CSV file export For IE

只需用它创建一个 Blob 对象

//Save file
if (isMicrosoftIE()) {
    csvData = decodeURIComponent(csv);

    if(window.navigator.msSaveBlob){
        var blob = new Blob([csvData],{ type: "application/csv;charset=utf-8;"});
        navigator.msSaveBlob(blob, filename);
    }
}
else
{
    csvData = "data:application/csv;charset=utf-8," + encodeURIComponent(csv);
    $(this).attr({
        "href": csvData,
        "target": "_blank",
        "download": filename
    });
}

它对我有用！

于 2015-08-26T07:07:16.013 回答
0

这里解释了两种替代解决方案：http: //sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

我可以说的主要区别是 iframe 与原始页面具有相同的来源，这可能不是我们所希望的（我不确定安全隐患，例如，对于加载的资源，引用者或 cookie 可能是什么）。

使用 javascript: 方案技术的示例在这里：http: //jsbin.com/uhenuz/4（如果与 https 一起使用，则需要额外的谷歌搜索和良好的测试来检查混合的 https/http 警告永远不会出现。）

于 2013-07-01T02:56:33.847 回答
0

当我正在寻找一种方法来检测文件的数据 uri 支持（在我的情况下为 PDF）时，我来到了这里。Modernizr 检查图像支持的方法不够好，因为 Internet Explorer 11 和 Edge 25 确实支持，但不支持 application/pdf 等文件类型。Snekse 检查下载属性的方法适用于 IE，但不适用于 Edge。最终，我编写了自己的特征检测脚本，使用 AJAX 调用尝试打开数据 URI 并检查错误。这是我使用的脚本（在 IE 11、Edge 25、Firefox 46 和 Chrome 49 中测试）：

checkDataURISupport(function (checkResult) {
    if (checkResult) {
        alert('Files in data URIs are supported.');
    } else {
        alert('Files in data URIs are NOT supported.');
    }
})

function checkDataURISupport(callback) {
    try {
        var request = new XMLHttpRequest();
        request.onload = function reqListener() {
            callback(true);
        };
        request.onerror = function reqListener() {
            callback(false);
        };
        request.open('GET', 'data:application/pdf;base64,cw==');
        request.send();
    } catch (ex) {
        callback(false);
    }
}

更新

我意识到任何测试数据 URI 的代码是 iframe 支持也在测试是否支持在新窗口中打开数据 URI。因此，此 SO 答案中提到并链接到 Snekse 的答案更新的解决方案在技术上是优越的，我建议使用它而不是上面的代码。

于 2016-04-28T13:19:12.177 回答