IT技术互动交流平台

Html5页面下载文件(apk、txt等)方法详解

作者:whl  发布日期:2018-11-07 08:30:00

  对于精通html5的程序员来说,通过Html5来下载apk/txt这些软件应该就是个小意思,但是对于入门者来说却是感觉很难操作的。其实大家还是把Html5想复杂了,下面将分享几种下载方式,小编亲测感觉还是非常有参考价值,大家可以学习一下。

  需求描述

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

  大概是下面这样的:

H5页面下载

  需求分析

  接到需求的时候我偷乐了一下,这个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可以在原页面打开一个页面。

  方法二:

  关键代码:

关键代码

  使用iframe的话,既可以实现下载,又可以不重新打开页面,并且,对原页面的布局不会产生任何影响,最后我也是采取这种方案的。

  方法三

  第三种方法是偶然学到的,既然使用iframe可以,那使用form一定也是可以的,form的action也可以发请求。

  于是改写了下第二种方法:

form的action也可以发请求

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

  总结

  通过这次学习大家可以发现第二和第三种方法主要是通过对iframe和form更加深入的拓展来实现下载文件的。对于iframe来说,它能够把子页面套入父页面,而form里的action是可以进行发送请求和跳转页面操作的。将他们使用在下载文件上你会发现效果是十分显著的。

延伸阅读:

Tag标签: Html5   下载文件  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规