详解Html5页面实现下载文件(apk、txt等)的三种方式


Posted in HTML / CSS onOctober 22, 2018

需求描述

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

大概是下面这样的?:

详解Html5页面实现下载文件(apk、txt等)的三种方式

需求分析

接到需求的时候我偷乐了一下,这个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';

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

然后…………

详解Html5页面实现下载文件(apk、txt等)的三种方式

截图中所说的空白页是因为我改变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,有兴趣的也可以研究一下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 #HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 #HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 #HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 #HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 #HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 #HTML / CSS
HTML5实现签到 功能
Oct 09 #HTML / CSS
You might like
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
js回调函数仿360开机
2019/12/26 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
简述Python中的进程、线程、协程
2016/03/18 Python
python读取二进制mnist实例详解
2017/05/31 Python
tornado+celery的简单使用详解
2019/12/21 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
flask开启多线程的具体方法
2020/08/02 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
校园活动宣传方案
2014/03/28 职场文书
爱我中华演讲稿
2014/05/20 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
保安2014年终工作总结
2014/12/06 职场文书
担保书范本
2015/01/20 职场文书
法务专员岗位职责
2015/02/14 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS