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

Question

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

上下文如下：

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

现在我的代码检查 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 对象但 不支持 允许 hyperlinks.

的数据 URI

如何确保下载 CSV 的 link 永远不会显示在不支持此类功能的浏览器中？

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

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

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

How to determine if the browser supports data URIs for hyperlinks

html

javascript

internet-explorer

data-uri

browser-feature-detection