如何确定浏览器是否支持超链接的数据 URI答案

【问题标题】：How to determine if the browser supports data URIs for hyperlinks如何确定浏览器是否支持超链接的数据 URI
【发布时间】：2015-11-11 23:54:57
【问题描述】：

除了浏览器嗅探之外，有没有办法确定浏览器是否支持使用数据 URI 进行超链接？

这是上下文：

我正在创建一个链接，该链接可以使用方便的数据 URI 下载通过 JavaScript 生成的信息 CSV 文件，或者，如果浏览器不支持将数据 URI 用于超链接，则生成所需内容的 HTML 表格。

现在我的代码检查window.URL 属性的存在，该属性在IE9 及更低版本中不存在。（目前还可以，因为我需要支持的 IE 用户正在以兼容模式运行，它模拟 IE8。）

if(window.URL){
    downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
    downloadLink.setAttribute("download","download.csv");
}else{
    downloadLink.href= "#";
    downloadLink.innerHTML = "table view";
    downloadLink.onclick = function(){
        // build and display HTML table
        return false;
    };
}

但是，与较新版本的 Internet Explorer（10、11 和 Edge）有一些重叠之处，因为它们支持 window.URL 对象，但不允许超链接的数据 URI。

如何确保下载 CSV 的链接永远不会显示在不支持这种花哨的浏览器上？

【问题讨论】：

见stackoverflow.com/questions/836777/…，stackoverflow.com/questions/24779312/…

标签： javascript html internet-explorer data-uri browser-feature-detection

【解决方案1】：

我相信我已经找到了答案。尝试检测<a> 元素上是否存在download 属性。

var browserSupportsDataURIsForHyperlinks = 
    typeof document.createElement("a").download  !== "undefined";

或

var browserSupportsDataURIsForHyperlinks = 
    "download" in document.createElement("a");

...在我的例子中，我已经有了一个可以使用的锚标签 (downloadLink)，所以我不需要创建一个新标签：

if(typeof downloadLink.download !== "undefined"){
    downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
    downloadLink.setAttribute("download","download.csv");
}else{
    downloadLink.href= "#";
    downloadLink.innerHTML = "table view";
    downloadLink.onclick = function(){
        // build and display HTML table
        return false;
    };
}

如果有人发现这种方法有任何问题，请告诉我。

【讨论】：