JavaScript updating iframe src via a loop to download multiple files

Question

My objective is to simultaneously download multiple files via php in one request. I cannot use the 'zip' solution to zip the files. So the solution I came up with was to have an empty iframe and dynamically update the source so the iframe downloads multiple files.

I have a basic page with an iframe and when a user clicks the files they download it runs a script which loops through the selected files and update the iframe source to a php page which downloads a single file:

page which sends request:

<script>
function download_files(){
    // assume this is a loop which finds out all the files which were selected by the user
    for (var i = 0, len = selected_fileids.length; i < len; i++) {

        var fileid_single2 = selected_fileids[i].split("select_");
        fileid_splitted = fileid_single2[1];

        document.getElementById('iframe_downloader').src = "/index.php?page=download&fileid=" + id;

    }
}
</script>


<iframe src="" style="width:0;height:0;border:0; border:none;" id="iframe_downloader"></iframe>";

<!-- assume there will be checkboxes here which lets the user pick their files -->

<p onclick="download_files();">download</p>

php download script, assume $filepath and $filename have correct values:

header("Pragma: ");
        header("Cache-Control: ");
        header("Content-Type: application/force-download");
        header("Content-Disposition: attachment; filename=\"{$row_filename}.xls\"");
        header("Content-Transfer-Encoding: binary");
        readfile($filepath);

So basically, the script loops through all selected files and keeps changing the source to try and download all the files via the iframe.

The problem I am having is that it appears to only actually download the last file. I have tried debugging it and I can see that it is being looped through all items as I can console.log the process. However only the last file is actually being triggered by the iframe.

I have tried adding setInterval , that is no good either. I have looked at fiddler and I can confirm only the last file is being triggered.

Answer 1

You can create an iframe for each download. This is the solution in Javascript:

<script>

function createFrame(url) {
    var frame = document.createElement("iframe");
    frame.setAttribute("src",url);
    frame.style.width  = "0";
    frame.style.height = "0";
    frame.style.border = "none";
    document.body.appendChild(frame);
}

function download_files() {
    var len = selected_fileids.length;
    for (var i = 0; i < len; i++) {
        var id = ....<incomplete original code>....;
        createFrame("/index.php?page=download&fileid="+id);
    }
}

</script>

<a href="#" onclick="download_files();return false;">download</a>

I must warn that this code is untested, it just shows the idea.