var url = 'http://www.example.com/file.zip';
var iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.display = 'none';
iframe.onload = function() {
    console.debug('start downloading...');
    document.body.removeAttribute(iframe);
}
document.body.appendChild(iframe);

Under chrome and IE, if the HTTP file header contains content disposition: attachment; That is, the onLoad event will not be triggered if there is a link to download the file.

Let's talk about content disposition:

Content disposition is an extension of the MIME Protocol, which instructs the mime user agent how to display attached files. Content disposition can actually control the user to provide a default file name when the requested content is saved as a file. The file is directly displayed in the browser or the file download dialog box pops up when accessing. Content disposition is the attribute name. Disposition type is how to download. For example, attachment is how to download as an attachment. Disposition ParM is the file name when saving by default. When the server sends a file to the client browser, if it is a file type supported by the browser, it will generally be opened by the browser by default, such as txt, jpg, etc, It will be displayed directly in the browser. Notes: 1 When content disposition is used in the code to ensure that the browser pops up the download dialog box. response.addHeader(‘Content-Disposition’, ‘attachment’); Make sure you haven't done anything about disabling browser caching. The code is as follows: response setHeader(‘Pragma’, ‘No-cache’); response.setHeader(‘Cache-Control’, ‘No-cache’); response.setDateHeader(‘Expires’, 0); Otherwise, you will find that the download function is fine in opera and firefox, but not under IE

Solution 1: using cookie s

The backend puts the file download progress in the cookie, and obtains the file download progress by polling the cookie to judge whether the file has been downloaded. Defects: 1. The back-end cooperation is required. 2. If the client disables cookies, the scheme is completely invalid; In traceless browsing mode, read cookies and even code errors.

Solution 2: add header configuration

// Do not let the browser automatically detect the file type
// Description: http://drops.wooyun.org/tips/1166
response.addHeader('X-Content-Type-Options', 'nosniff');
// Prompt the browser not to let it load the file contents of the resource in frame or iframe
// https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options
response.addHeader('X-Frame-Options', 'deny');

However, in the chrome V58 version, setting the X-Frame-Options of the header to deny will report an error. And the network connection will fail when downloading.

Solution 3: polling and listening to readyState

The timer polls and listens to the state of readyState. If it is complete or interactive, it indicates that the file loading is completed.

var timer = setInterval(function () {
    iframe = document.getElementById('iframedownload');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    // Check if loading is complete
    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {
        loadingOff();
        clearInterval(timer);
        return;
    }
}, 4000);

This method is better because it does not need the cooperation of the back end, does not rely on the problems caused by variables such as cookie s, and can meet our requirements.