Question

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

以下是上下文：

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

现在我的代码检查是否存在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; }; }属性，该属性在IE9及以下版本中不存在。（现在这个工作正常，因为我需要支持的IE用户在兼容模式下运行，模拟IE8。）

checkBox

然而，与较新版本的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");

...在我的情况下，我已经有了一个锚标记（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

1 个答案: