如何确定浏览器是否支持使用数据URI作为超链接

Question

除了浏览器嗅探，是否有一种方法来确定浏览器是否支持使用数据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文件的链接？

- Thriggle

---

请参见以下链接：https://dev59.com/S3RA5IYBdhLWcg3www3D，https://dev59.com/g2Af5IYBdhLWcg3wUBX4。 - guest271314

Answer 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;
    };
}

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

- Thriggle