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

Question

我有一个下载 excel 文件的按钮。当用户点击按钮时，onClick 函数调用 window.location=网址

下载完成后，会弹出保存文件的对话框。

现在，我想在文件对话框出现之前显示一个微调器。我该怎么做？

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

有什么想法吗？

谢谢。

Answer 1

这将是一个只适用于 Firefox 浏览器的解决方案:

<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 来吸收文件。文件下载后，将其提供给用户并触发隐藏微调器 DIV 的 .ONLOAD 事件。全部使用客户端 javascript 完成!