数据URI方案和Internet Explorer 9错误

Question

我在使用IE版本6-9的RFC 2397数据网址方案时遇到问题.使用当前版本的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无法识别此协议.

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

我已经搜遍了所有的解决方案,并尝试了IE的许多例子,希望它是我的语法,但还找到了解决方案.

Answer 1

数据URI不能用于导航,脚本编写或填充IE中的frame或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个字符.

资源数据必须正确编码; 否则,发生错误并且未加载资源.必须对"#"和"%"字符进行编码,以及控制字符,非US ASCII字符和多字节字符.

有关更多信息,请参阅RFC2397:"数据"URL方案.

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

Answer 2

对我来说,找到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链接.您可以查看完整的要点以获取更多详细信息.给安德鲁·布莱德洛的帽子提示方向.

UPDATE

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

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

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

更新2

有一个用于检测数据uri方案的Modernizr问题.它引用了另一个SO答案.一定要检查出来.

Answer 3

Internet Explorer确实支持数据URI(资源有点过时).它有一些安全方面的考虑因素,可以防止它允许恶意企图重定向用户,或者允许黑客在不需要第三方脚本或托管资源的情况下进行网络钓鱼.

这意味着您可以将它与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.open或iframe,因为这些将允许一些非常危险的事情,包括带有数据URI的网络钓鱼:

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

最后一个示例很可能是PayPal登录屏幕的完整复制品.相反,它只是一个带有事件处理程序绑定和侦听点击的HTML按钮.类似的hackery可能来自window.open:

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

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

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

Answer 4

根据Franco在这里的回答:CSV文件导出对于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
    });
}

它对我有用!