javascript:如何在文件下载之前显示微调器

Question

我有一个下载excel文件的按钮.当用户单击该按钮时,onClick函数调用window.location = url

下载完成后,保存为对话框将弹出文件.

现在,我想显示一个微调器,直到出现文件对话框.我该怎么做呢？

我尝试在"window.location"之前创建一个微调器并在之后隐藏它,但是微调器立即消失,因为window.location在文件下载之前不会阻塞.

有任何想法吗？

谢谢.

Answer 1

它是这样完成的:

<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>

在您的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" />

然后用它来调用它:

<button type="button" onclick="download('/spreadsheet.xls');">DOWNLOAD SPREADSHEET</button>

该按钮将使用我们要下载的URL调用我们的javascript函数.这时我们使隐藏的微调器DIV可见并允许它接管屏幕(注意位置绝对的样式).创建IFRAME以吸收文件.下载文件后,会将其提供给用户并触发.ONLOAD事件,该事件会隐藏微调器DIV.全部用客户端javascript完成!

Answer 2

您不能仅使用客户端脚本来执行此操作,因为下载完成时没有事件.

您必须通过服务器上的代理页面下载文件,并在URL中使用唯一标识,以便可以识别每个下载.然后,您可以将脚本中的AJAX请求发送到服务器以确定下载的状态.