如何检测对 HTML5“下载”属性的支持?

IT技术 javascript html
2021-02-20 18:49:15

HTML5 中实现的新功能之一是download锚标记属性。此属性的好处在于,它为用户提供了下载在客户端应用程序中创建的内容的方法,例如图像(例如从画布转换而来)。

目前,对这个功能的支持很差,所以我想知道如何在浏览器中检测对这个功能的支持。

2个回答

使用Modernizr方法:创建元素,并检查属性是否已定义:

var a = document.createElement('a');
if (typeof a.download != "undefined") {
    alert('has support');
}
@dbaseman 实际上,“未定义”是标准实现。据我所知,其他任何事情都不是,所以检查“(typeof X == 'undefined')”是否是要走的路。无论如何,非常感谢您的回答!它解决了我的问题:)
2021-04-17 18:49:15
或者短版 var downloadAttrSupported = ("download" in document.createElement("a"))
2021-04-30 18:49:15
此解决方案似乎不再适用;现代版本的 Firefox 似乎有a.download定义,但没有使用它。
2021-05-04 18:49:15
@McGarnagle:使用 Firefox 26 中的控制台在document.createElement('a').target我的 Mac 上执行返回空字符串,而不是“未定义”。我正在尝试下载一个数据 URL,所以它可能不属于“同源”保护伞......
2021-05-04 18:49:15
我建议包括 Modernizr 本身,但如果它用于单个用例,这确实会更好。
2021-05-07 18:49:15

if使事情变得简单的单行条件:

if (document.createElement('a').download==undefined && e.target.hasAttribute('download'))
{
 e.preventDefault();
 console.log('Error: this is a download link, please right-click to save the file.');
}

对该download属性的支持参差不齐(Chrome 14+、Firefox 20+、IE13+、Safari 10+,在(真实)Opera 中不支持。上述脚本不会干扰支持的浏览器。