Three ways of downloading files (apk, txt, etc.) on Html5 page are explained in detail.

Time:2019-5-6

Requirement description

The original requirement is that there is an H5 page with a “click download” button. After clicking, the specific APK is downloaded.

Probably the following: (1)

requirement analysis

When I received the request, I had a good time. The biggest advantage of this H5 page is that it can’t be used in micro-mail (micro-mail is a pit, various restrictions, it’s impossible to download APK directly from micro-mail browser) and it’s much simpler if it’s in normal browser.

Function realization

So I came up with the first, change location. href when I click the download button.

Method 1:

// I found an APK download link as an example
window.location.href = 'http://imtt.dd.qq.com/16891/26747DD8B125A8479AD0C9D22CA47BC9.apk?fsname=com.snda.wifilocating_4.2.91_3211.apk&csr=1bbd';

Take it in the browser and try it out. Many Android models can be accessed. Then Meizi delivered the task and packed up and went home.

Then…

The blank page in the screenshot is because I change the download link of href to apk. When the page opens, it will stay in a blank page, and then the progress bar of download APK will appear on the status bar of the mobile phone.

Since you don’t want a blank page, you can open it on the current page instead of opening it directly.

When I think of iframe, I can open a page on the original page with the help of iframe.

Method two:

Key code:


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);

If you use iframe, you can either download or not reopen the page, and it will not have any impact on the layout of the original page. Finally, I adopt this scheme.

Method three

The third method is accidental learning. Since iframe can be used, it must be possible to use form. Form action can also send requests.
So I rewrote the second method:


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();

The above code can also fulfill the requirement of downloading apk.

summary

In fact, the second and third methods are to expand the use of iframe and form. Looking at it separately, we know that iframe can nest sub-pages in the parent page, and that form action can request or jump pages. This is a very common function, but we do not know that they will be used to download files, and the effect is very good. It can be seen that knowledge still needs to be assimilated and integrated.

When I wrote this article, I checked iframe. When Ajax and other technologies did not appear, the usual method of long-term polling in the industry for some time was to use iframe. If you are interested, you can also study it.

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.

Recommended Today

JS regular expression syntax

regular expression syntax Regular expression is a text pattern composed of ordinary characters (such as numbers, letters, punctuation and metacharacters used to represent a specific character or character set) and special characters (characters used as qualifications or special functions). Common characters All numbers, lowercase letters, uppercase letters, punctuation are common characters. Metacharacters are required to […]