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

How to determine if the browser supports data URIs for hyperlinks

本文关键字：数据 URI 超链接 支持 何确定 浏览器 是否      更新时间：2023-09-26

除了浏览器嗅探之外，还有什么方法可以确定浏览器是否支持对超链接使用数据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）有一些重叠之处，因为它们支持该窗口。URL对象，但不允许超链接使用数据URI。

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

我相信我已经找到了答案。尝试检测<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;
    };
}

如果有人认为这种方法有什么问题，请告诉我。

相关文章：