Chrome最新更新后多文件下载代码失效，请求解决方案

Chrome的最新更新确实对批量下载的逻辑加了不少限制，结合你的代码片段，我来帮你定位问题并给出可行的修复方案：

问题根源 #

你的原始代码用var i声明循环变量，这会导致所有迭代共享同一个变量引用——哪怕是同步触发下载，循环跑完后i的值会停在最后一个索引，所以所有下载都会指向最后一个文件。另外，Chrome新版本对短时间内的同步批量下载请求有了更严格的安全拦截，哪怕你开启了允许多文件下载的设置，浏览器也可能判定这类请求为非用户主动触发而阻止。

修复方案 #

方案1：修复循环变量绑定问题（优先尝试）

把循环里的var i改成let i，每个迭代会创建独立的变量作用域，确保每个下载链接能拿到正确的索引值：

for (let i = 0; i < photosURL.length; i++) {
  var downloadLink = document.createElement("a");
  downloadLink.href = photosURL[i];
  downloadLink.download = "foto_id_" + i;
  // 先将链接添加到DOM（部分浏览器需要这一步才能触发下载）
  document.body.appendChild(downloadLink);
  // 触发下载点击
  downloadLink.click();
  // 下载触发后移除临时链接
  document.body.removeChild(downloadLink);
}

方案2：添加延迟避免浏览器拦截

如果方案1还是失效，说明Chrome的安全机制拦截了短时间内的批量请求，这时可以给每个下载请求加微小延迟，模拟用户逐次触发的行为：

photosURL.forEach((url, index) => {
  setTimeout(() => {
    const downloadLink = document.createElement("a");
    downloadLink.href = url;
    downloadLink.download = `foto_id_${index}`;
    
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  }, index * 150); // 每个请求间隔150ms，可根据需求调整
});

额外注意事项 #

• 确保photosURL里的链接是同源资源，或者目标服务器配置了正确的CORS响应头（比如Access-Control-Allow-Origin），否则download属性可能失效，浏览器会直接打开文件而不是下载。
• 这段代码必须放在用户主动触发的事件回调里（比如按钮点击事件）——Chrome会完全阻止非用户交互触发的下载请求。

内容的提问来源于stack exchange，提问作者Mario Galvão