javascript 使用 jQuery 和 iFrame 下载大文件 - 需要文件就绪事件，以便我可以隐藏加载 gif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17022247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Downloading large files with jQuery & iFrame - Need a File Ready event so I can hide the loading gif
提问by Owen
I'm using jQuery to download some files that take some time to create, so I show a loading gif to tell the user to be patient. But the problem is, the loading gif is currenntly shown and hidden all within a split second.
我正在使用 jQuery 下载一些需要一些时间来创建的文件，所以我展示了一个加载 gif 来告诉用户要有耐心。但问题是，加载 gif 当前显示并隐藏在一瞬间。
Is there a way for me to hide the loading gif after the download is complete and the user has the Save File popup on the screen?
下载完成并且用户在屏幕上有“保存文件”弹出窗口后，有没有办法让我隐藏正在加载的 gif？
HTML
HTML
<tr data-report_id="5">
<td>
<input type="button" id="donwload"></input>
<img class="loading" src="/Images/Loading.gif"/>
<iframe id="hiddenDownloader"></iframe>
<td>
</tr>
JS
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();
THE SOLUTION I ENDED UP USING
我最终使用的解决方案
<script>
$("#download").on("CLICK", function () {
var button = $(this);
button.siblings(".loading").show();
var rowNumber = GetReportId();
var url = GetUrl();
button.after('<iframe style="display:none;" src="' + url + '" onload="loadComplete(' + rowNumber + ')" />');
}
function loadComplete(rowNumber) {
var row = $("tr[data-row_number=" + rowNumber + "]");
row.find(".loading").hide();
}
</script>
<tr data-report_id="5">
<td>
<input type="button" id="download"></input>
<img class="loading" src="/Images/Loading.gif" style="display:none;"/>
<td>
</tr>
UPDATE
更新
I was having problems with this method in Chrome so I changed all my jquery code to look for a cookie that the back end code set when the download had finished processing. When the jquery detected the cookie, it turned off the loading gif & whiteout.
我在 Chrome 中使用此方法时遇到问题，因此我更改了所有 jquery 代码以查找下载完成处理后后端代码设置的 cookie。当 jquery 检测到 cookie 时，它关闭了加载 gif 和 whiteout。
采纳答案by epoch
Have the iframeonloadevent call your code:
让iframeonload事件调用您的代码：
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;
回答by Alex
iframe.src = url;
$(iframe).load(function() {
$(".loading").hide();
});
回答by Venkateswara Rao
I suggest to separate the file generation from downloading.
我建议将文件生成与下载分开。
There should be one call which request server to generate file. Server should respond with unique id to get it downloaded.
应该有一个请求服务器生成文件的调用。服务器应以唯一 id 响应以下载它。
Another call should be simple get call that can be embedded into iframe/launch new window which directly download the generated file.
另一个调用应该是简单的 get 调用，它可以嵌入到 iframe/launch new window 中，直接下载生成的文件。
Just show loading screen till you receive the response for first call.
只需显示加载屏幕，直到您收到第一次呼叫的响应。
