检测浏览器何时收到文件下载

Question

检测浏览器何时收到文件下载

我有一个允许用户下载动态生成文件的页面。这需要很长时间来生成，所以我想显示一个“等待”指示器。问题是，我不知道如何检测浏览器何时收到文件，所以我可以隐藏指示符。

我以一种隐藏的形式发出请求，该请求发布到服务器，并针对隐藏的iframe获取其结果。这样我就不会用结果替换整个浏览器窗口了。我在iframe上听一个“Load”事件，希望它在下载完成后启动。

我返回一个“内容处理：附件”头与文件，这导致浏览器显示“保存”对话框。但是浏览器不会在iframe中触发“Load”事件。

我尝试过的一种方法是使用多部分响应。因此，它将发送一个空的HTML文件，以及附加的可下载文件。例如：

Content-type: multipart/x-mixed-replace;boundary="abcde"--abcdeContent-type: text/html--abcdeContent-type:
 application/vnd.fdfContent-Disposition: attachment; filename=foo.fdf

file-content--abcde

这在Firefox中是可行的；它接收空的HTML文件，触发“Load”事件，然后显示可下载文件的“Save”对话框。但是它在IE和Safari上失败；IE触发“Load”事件，但不下载文件，Safari下载文件(名称和内容类型错误)，并且不触发“Load”事件。

另一种方法可能是调用启动文件创建，然后轮询服务器直到它准备就绪，然后下载已经创建的文件。但我宁愿避免在服务器上创建临时文件。

有人有更好的主意吗？

Answer 1

我使用以下方法下载BLOB并在下载后撤销对象-url。它工作在铬和火狐！function download(blob){     var url = URL.createObjectURL(blob);     console.log('create ' + url);     window.addEventListener('focus', window_focus, false);     function window_focus(){         window.removeEventListener('focus', window_focus, false);                            URL.revokeObjectURL(url);         console.log('revoke ' + url);     }     location.href = url;}文件下载对话框关闭后，窗口将恢复她的焦点，从而触发Focus事件。

Answer 2

一个非常简单的(和跛脚)一行解决方案是使用window.onblur()事件以关闭加载对话框。当然，如果时间太长，用户决定做其他事情(比如阅读电子邮件)，加载对话框就会关闭。