使用 window.location 下载文件时显示加载程序图标

Posted 2023-05-07

【中文标题】使用 window.location 下载文件时显示加载程序图标

【英文标题】：Showing a loader icon while downloading a file using window.location

【发布时间】：2017-12-12 02:21:43

【问题描述】：

在一个小型 javascript 网络应用程序中，我正在使用

window.location = '[url]/download-file';

实际下载文件作为附件。在服务器端，我使用 Content-Disposition 作为“附件；文件名=xyz.xml' 这很好用，我能够在浏览器上触发下载而无需实际重新加载当前页面（因为它是一个单页应用程序，即使在下载完成后我也需要保持 DOM 的当前状态。）

但是，我想在下载文件时显示一个小的 ajax 加载程序 svg。我对显示/隐藏加载程序的逻辑没有问题。我正在努力的地方是如何在 window.location 启动时显示加载程序，并在解决后隐藏它（当浏览器下载提示出现以保存文件时。）

当浏览器 http 请求开始直到浏览器 http 请求停止时，我可以在 JavaScript 中监听一个事件以显示/隐藏加载程序吗？

【问题讨论】：

没有办法仅在客户端上执行此操作。 ***.com/questions/2343418/…

好的。我对 beforeunload 有一些希望，但我猜这完全不同：developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

【参考方案1】：

由于这是不可能的，我将使用服务器端 cookie 来跟踪是否已发送响应，如以下堆栈溢出问题的答案中所述： Detect when browser receives file download