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

Question

除了浏览器嗅探之外，是否有其他方法可以确定浏览器是否支持对超链接使用数据 URI？

这里是上下文:

我正在创建一个链接，该链接可以下载通过 JavaScript 使用方便的数据 URI 生成的 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 的链接永远不会显示在不支持此类功能的浏览器中？

Answer 1

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

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

或

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

...在我的例子中，我已经有了一个可以使用的 anchor 标记 ( 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;
    };
}

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