html5 提示属性_快速提示：使用HTML5下载属性

最新推荐文章于 2022-11-23 15:42:07 发布

daique1908

最新推荐文章于 2022-11-23 15:42:07 发布

阅读量305

点赞数

文章标签： java linux php python css

html5 提示属性

用HTML创建下载链接非常简单。添加锚标记并指向href属性内的文件。但是，某些文件类型（例如图像，.pdf，.txt和.doc）将不会下载。相反，它们将在浏览器中打开。

如果您对网站具有服务器端访问权限，则可以使用一些变通办法，例如配置.htaccess ，以直接下载这些文件。如果您的网站托管有免费服务，例如WordPress.com，Blogspot或不允许您这样做的Github页面，请考虑使用download属性。

使用HTML5下载属性

download属性是HTML5规范的一部分，将链接表示为下载链接，而不是导航链接。

download属性还允许您在下载时重命名文件名。当文件驻留在服务器上时，尤其是如果文件是自动生成的，可以用数字和破折号系统地命名，例如acme-doc-2.0.1.txt 。用户最好在下载时以更合理的名称接收文件，例如： Acme Documentation (ver. 2.0.1).txt （不要忘记文件扩展名）。

这是实际的样子：

<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a>

在演示页面上尝试一下，您应该找到使用在download属性中指定的名称下载的文件。

几个注意事项：

出于安全考虑， Firefox仅允许用户下载具有相同来源的文件。该文件必须来自您自己的服务器或域名，否则它将在浏览器中打开。
虽然Chrome和最新的Opera（带有Chromium / Blink）都允许下载跨域文件，但它们都将忽略属性值。换句话说，文件名将保持不变。

提供后备

尽管Edge支持Edge属性，但尚未在Internet Explorer中实现download属性（您可能期望如此）。

为了使事情变得安全，我们可以添加一个不错的后备，例如在下载链接下方为不支持的浏览器提供额外的说明。为此，我们将需要下载包含download功能测试的Modernizr 。

然后，我们可以添加以下脚本。

if ( ! Modernizr.adownload ) {
	var $link = $('a');

	$link.each(function() {
		var $download = $(this).attr('download');
	
		if (typeof $download !== typeof undefined && $download !== false) {
      var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');
      $el.insertAfter($(this));
		}

	});
}

该脚本将测试浏览器是否支持download属性。如果不是，它将为类添加新的<div>以及用于说明目的的说明类，并将其插入到具有download属性的任何链接的下面。