javascript - 如何使用 window.location.href 下载多个文件？

Question

我有以下 javascript：

function downloadFiles(){
  var files = [];
  files.push('mysite.com/file1.txt');
  files.push('mysite.com/file2.txt');
  files.push('mysite.com/file3.txt');

  for(var ii=0; ii<files.length; ii++){
    window.location.href = files[ii];
  }
}

问题是这只下载列表中的最后一个文件，因为前两个文件被最后一个文件覆盖。在继续下一个文件之前，如何等待用户对每个文件的输入？

Answer 1

我最终做了什么：

function downloadFiles(){
  var files = [];
  files.push('file1.txt');
  files.push('file2.txt');
  files.push('file3.txt');

  for(var ii=0; ii<files.length; ii++){
    downloadURL(files[ii]);
  }
}

var count=0;
var downloadURL = function downloadURL(url){
  var hiddenIFrameID = 'hiddenDownloader' + count++;
  var iframe = document.createElement('iframe');
  iframe.id = hiddenIFrameID;
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  iframe.src = url;
}

Answer 2

如果您将代码更改为使用window.open()而不是window.location，则可以同时启动所有三个下载。

我知道这不能满足在呈现每个下载之前等待用户输入的要求，但它确实建立了您原始代码的精神。希望它会有所帮助。

function downloadFiles(){
  var files = [];
  files.push('file1.txt');
  files.push('file2.txt');
  files.push('file3.txt');

  for(var ii=0; ii<files.length; ii++){
    window.open(files[ii]);
  }
}

Answer 3

旧的，但我最终采用的解决方案如下

let currentIndex = 0;
const intervalId = setInterval(() => {
  if (currentIndex === files.length - 1) clearInterval(intervalId);
  window.location.href = files[currentIndex];
  currentIndex++;
}, 1000);