HTML5中的强制性免费下载特性download应用案例分析

日期:2021-02-24 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

HTML5 的 Download 特性用来强制性访问器免费下载对应文档,而并不是开启。Chrome 和 Firefox 等访问器太过度强劲,或许是以便提高客户体验,当客户点一下的資源文档能够被它们鉴别的情况下(比如 pdf 会立即在访问器开启,mp3、mp4 等新闻媒体立即用访问器内嵌播发器播发)。但有时,客户实际上是期待立即免费下载而并不是在访问器上看看,这时候便可以再加这个特性,特性值会对免费下载的文档重取名:
<a href="downloadpdf.php" download="download.pdf">点一下立即免费下载并储存成 download.pdf 文档</a>
假如你明确这个資源是客户毫无疑问会免费下载的,便可以再加这个特性,还能够用 JS 或手动式更改要想储存的文档名。
在html里建立1个是免费下载连接是便捷的,加上1个<a>标识和指向文档的href特性就可以了。可是一些文档不容易被免费下载(例如图象,pdf,txt,doc),相反,她们会在访问器中挨打开。
假如你的站点是有服务器端,你能够根据配备.htaccess文档来使得那些文档能够被免费下载。假如你的站点是被WordPress.com或github网页页面代管的(静态数据网页页面),那末轻考虑到应用<a>标识的download特性

应用“Download”特性
download特性是html5标准的1一部分,它主要表现为1个免费下载连接,而并不是1个导航栏的连接。
download特性也容许你去重取名1个必须免费下载的文档。例如,1个文档储放在服务器上,假如这个文档是全自动转化成的,1般来讲它被都取名为1个系统软件的数据和破折号的组成,比如acme-doc⑵.0.1.txt,大家能够重取名这个免费下载文档的姓名,客户免费下载后看到的文档名能够是1个较为好的姓名,比如Acme Documentation (ver. 2.0.1).txt,像这样提升客户体验(不必忘掉文档的扩展名)。

XML/HTML Code拷贝內容到剪贴板
  1. <a href="downloadpdf.php" download="download.pdf">点一下立即免费下载并储存成 download.pdf 文档</a>  

能够看1下这个demo详细地址:http://tutsplus.github.io/download-attribute/index.html

1些留意:
Firefox考虑到到安全性难题,该免费下载文档务必是从自身的服务器或网站域名中的,不然将在访问器中开启。
在Chrome和Opear中,假如说免费下载文档并不是在非空子集的服务器或网站域名中,这些访问器会忽略download特性,换句话来讲,文档名不会改变。

出示储备计划方案:
在写本文的情况下,download特性并沒有在Safari和IE中完成,可是IE宣称,download特性的完成早已在开发设计日程顶部了。

在这期内,大家可使用1个储备计划方案去适配那些访问器。大家必须去免费下载Modernizr的download特性特点检测。

随后加上下列脚本制作:

JavaScript Code拷贝內容到剪贴板
  1. if ( ! Modernizr.adownload ) {   
  2.     var $link = $('a');   
  3.     $link.each(function() {   
  4.         var $download = $(this).attr('download');   
  5.         if (typeof $download !== typeof undefined && $download !== false) {   
  6.       var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');   
  7.       $el.insertAfter($(this));   
  8.         }   
  9.     });   
  10. }  

这个脚本制作是去检测访问器是不是适用download特性的,假如访问器不适用的话,它就会想有download特性的<a>标识下面,插进1个有download-instruction类的<div>标识,并给予文本指引应用右键免费下载。

上一篇:canvas线条的特性详解 返回下一篇:没有了