H5页面实现下载文件（apk、txt等）的三种方式

需求描述

----》》》评论里面指出有的类型的文件下载不了，主要是由于下面的方法本质上都是改变location.href，当浏览器不能‘理解’这种类型时，就会直接下载，反之，浏览器就会直接打开，并不会下载

接到的原始需求是这样的，有一个H5页面，页面中有个“点击下载”的按钮，点击以后，完成下载特定的apk。
大概是下面这样的👇：

需求分析

接到需求的时候我偷乐了一下，这个H5页面最大的优势是不在微信中使用（微信好坑，各类限制，基本上从微信浏览器里面实现直接下载apk是不太可能的），若是是在日常的浏览器的话，就简单多了。

功能实现

因而我想到了第一种，点击下载按钮的时候改变location.href。

方法一：

// 我随便找了个apk的下载连接举个例子
window.location.href = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';

拿在浏览器里面试了下，多个安卓机型均可以走通，而后我美滋滋得交付了任务，收拾收拾东西回家。
而后…………

截图中所说的空白页是由于我改变href为apk的下载连接，网页打开的时候会停留在一个空白页，而后通常手机的状态栏上会出现下载apk的进度条。
既然不想出现空白页面的话，那不直接打开一个页面而改为在当前页打开就能够了。
这时候想到iframe，借助iframe能够在原页面打开一个页面。

方法二：

关键代码：

var src = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = "javascript: '<script>location.href=\"" + src + "\"<\/script>'";
document.getElementsByTagName('body')[0].appendChild(iframe);

使用iframe的话，既能够实现下载，又能够不从新打开页面，而且，对原页面的布局不会产生任何影响，最后我也是采起这种方案的。

方法三

第三种方法是偶然学到的，既然使用iframe能够，那使用form必定也是能够的，form的action也能够发请求。
因而改写了下第二种方法:

var src = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';
var form = document.createElement('form');
form.action = src;
document.getElementsByTagName('body')[0].appendChild(form);
form.submit();

以上的代码也能够实现下载apk的需求。

总结

其实第二和第三种方法是扩展发挥了iframe和form的用法，单独来看，咱们知道iframe能够在父页面里嵌套子页面，知道form的action能够发请求或者跳转页面，这是很常见的功能，可是不知道它们会被用在下载文件这个需求上，且产生的效果很是好。可见知识仍是要融会贯通，触类旁通的。
写这篇的时候我去查了下iframe，原来ajax等技术未出现的时候，有段时间业内经常使用的长轮询的方法居然就是借助的iframe，有兴趣的也能够研究一下。