javascript：如何在文件下载之前显示微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5757801/
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
javascript: how to show spinner until file downloads
提问by hese
I have a button to download an excel file. When the user clicks the button, the onClick function calls window.location= url
我有一个下载excel文件的按钮。当用户点击按钮时，onClick 函数调用 window.location= url
and when the downloading is done, the save as dialog popups with the file.
下载完成后，另存为对话框会弹出文件。
Now, I want to show a spinner until the file dialog appears. How do I do this?
现在，我想显示一个微调器，直到出现文件对话框。我该怎么做呢？
I tried to create a spinner before "window.location" and hide it after that, but the spinner goes away immediately because window.location does not block until the file downloads.
我试图在“window.location”之前创建一个微调器并在此之后隐藏它，但微调器立即消失，因为 window.location 在文件下载之前不会阻塞。
Any ideas?
有任何想法吗？
Thanks.
谢谢。
采纳答案by Guffa
You can't do that using just client script, because there is no event for when the download completes.
您不能仅使用客户端脚本来执行此操作，因为下载完成时没有事件。
You would have to download the file through a proxy page on the server, with a unique identity in the URL so that each download could be identified. Then you could send AJAX requests from the script to the server to determine the status of the download.
您必须通过服务器上的代理页面下载文件，在 URL 中使用唯一标识，以便可以识别每个下载。然后您可以从脚本向服务器发送 AJAX 请求以确定下载状态。
回答by Hawk
It's done like this:
它是这样完成的：
<script type="text/javascript">
//<![CDATA[
function download(url){
document.getElementById('spinner').style.display='';
frame = document.createElement("iframe");
frame.onload=function(){document.getElementById('spinner').style.display='none';}
frame.src=url;
document.body.appendChild(frame);
}
//]]>
</script>
In your HTML, have a spinner set up and ready to go:
在您的 HTML 中，设置一个微调器并准备就绪：
<div id="spinner" style="background:url('/images/ico-loading.gif') #000 center no-repeat;opacity:.5;width:100%;height:100%;display:none;position:absolute" />
Then call it using this:
然后使用这个调用它：
<button type="button" onclick="download('/spreadsheet.xls');">DOWNLOAD SPREADSHEET</button>
The button will call our javascript function with the URL we want to download. At this time we make the hidden spinner DIV visible and allow it take over the screen (note position absolute in style). An IFRAME is created to suck down the file. After the file downloads, it is given to the user and the .ONLOAD event is fired which hides the spinner DIV. All done with client side javascript!
该按钮将使用我们要下载的 URL 调用我们的 javascript 函数。此时，我们使隐藏的微调器 DIV 可见并允许它接管屏幕（注意绝对位置样式）。创建一个 IFRAME 来吸收文件。文件下载后，它会提供给用户，并且会触发隐藏微调器 DIV 的 .ONLOAD 事件。全部使用客户端 javascript 完成！
回答by H.A.
This code works for jQuery, but with simple modification also for javascript. With this you won't need to change your requests-codes at all.
此代码适用于 jQuery，但也适用于 javascript。有了这个，您根本不需要更改请求代码。
- Create a div element which contains the animation (either another div element with css-animation or an animated gif in an img element) and give it the id = "loadingicondiv". For example like this
- 创建一个包含动画的 div 元素（另一个带有 css-animation 的 div 元素或 img 元素中的动画 gif）并为其指定 id = "loadingicondiv"。例如像这样
<div id="loadingicondiv">
<div id="loadingicon" style="background:url('imgs/logo.png') center no-repeat;opacity:1.0;display:none;position:absolute;z-index: 9999;"></div></div>
- Set the style of that div in your css file as follows
- 在您的 css 文件中设置该 div 的样式，如下所示
#loadingicondiv{
width: 100vw;
height: 100vh;
background: rgba(0,0,0, 0.3);
position: fixed;
z-index: 9999;
}
- In the embeded js file enter this
- 在嵌入的js文件中输入这个
function showAnimation(){
$('#loadingicondiv').css({display : ''});
};
function hideAnimation(){
$('#loadingicondiv').css({display : 'none'});
};
$(document).ajaxStart(showAnimation).ajaxStop(hideAnimation);
This last line makes, that every request sent by your web application, executes the function "showAnimation" at the beginning and executes the function "hideAnimation", when the request is done.
最后一行使您的 Web 应用程序发送的每个请求在开始时执行函数“showAnimation”并在请求完成时执行函数“hideAnimation”。
If you don't use jQuery and need pure javascript, simply replace $('#loadingicondiv') with the following code
如果您不使用 jQuery 并且需要纯 javascript，只需将 $('#loadingicondiv') 替换为以下代码
document.getElementById('loadingicondiv').style.display = 'none'
Note: In case you have some frequent updating on your website, which you don't want to show that animation for, just make the displaying of the animation dependent from a global variable, which you set to false before sending those special requests, which you don't want the animation to be shown for. And don't forget to set it to true, when the request is done by them.
注意：如果您的网站上有一些频繁更新，您不想为其显示动画，只需使动画的显示依赖于全局变量，在发送这些特殊请求之前将其设置为 false，即您不希望显示动画。并且不要忘记在他们完成请求时将其设置为 true。
