使用jQuery和iFrame下载大文件 – 需要一个File Ready事件，这样我就可以隐藏加载的gif

我正在使用jQuery下载一些需要一些时间来创建的文件，所以我展示了一个加载gif来告诉用户耐心等待。 但问题是，加载gif当前显示并隐藏在瞬间。

有没有办法让我在下载完成后隐藏加载gif并且用户在屏幕上显示Save File弹出窗口？

HTML

JS

 var reportId = $(this).closest("tr").attr("data-report_id"); var url = "/Reports/Download?reportId=" + reportId; var hiddenIFrameId = 'hiddenDownloader'; var iframe = document.getElementById(hiddenIFrameId); if (iframe === null) { iframe = document.createElement('iframe'); iframe.id = hiddenIFrameId; iframe.style.display = 'none'; document.body.appendChild(iframe); } iframe.src = url; $(".loading").hide(); 

---

我最终使用的解决方案

  $("#download").on("CLICK", function () { var button = $(this); button.siblings(".loading").show(); var rowNumber = GetReportId(); var url = GetUrl(); button.after(''); } function loadComplete(rowNumber) { var row = $("tr[data-row_number=" + rowNumber + "]"); row.find(".loading").hide(); }        

UPDATE

我在Chrome中遇到了这个方法的问题所以我更改了所有的jquery代码，以便在下载完成处理时查找后端代码设置的cookie。 当jquery检测到cookie时，它关闭了加载gif和whiteout。

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

Answer 1

让iframe onload事件调用您的代码：

 var reportId = $(this).closest("tr").attr("data-report_id"); var url = "/Reports/Download?reportId=" + reportId; var hiddenIFrameId = 'hiddenDownloader'; var iframe = document.getElementById(hiddenIFrameId); if (iframe === null) { iframe = document.createElement('iframe'); iframe.id = hiddenIFrameId; iframe.style.display = 'none'; iframe.onload = function() { $(".loading").hide(); }; document.body.appendChild(iframe); } iframe.src = url; 

Answer 2

 iframe.src = url; $(iframe).load(function() { $(".loading").hide(); }); 

Answer 3

我建议将文件生成与下载分开。

应该有一个请求服务器生成文件的调用。 服务器应以唯一ID响应以下载它。

另一个调用应该是简单的get调用，可以嵌入iframe / launch新窗口，直接下载生成的文件。

只需显示加载屏幕，直到收到第一个电话的响应。