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

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

下载完成后，“另存为”对话框会弹出文件

现在，我想显示一个微调器，直到出现“文件”对话框。我该怎么做

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

有什么想法吗

---

谢谢。

您不能只使用客户端脚本，因为下载完成时没有事件

您必须通过服务器上的代理页面下载文件，URL中具有唯一标识，以便可以识别每次下载。然后，您可以将AJAX请求从脚本发送到服务器，以确定下载状态。

操作如下：

<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完成的

这段代码适用于jQuery，但对javascript也进行了简单的修改。有了这个，你根本不需要更改你的请求代码

创建一个包含动画的div元素（包含css动画的另一个div元素或img元素中的动画gif），并为其指定id=“loadingicondiv”。比如像这样

在css文件中设置该div的样式，如下所示

在嵌入的js文件中输入

最后一行使web应用程序发送的每个请求在开始时执行函数“showAnimation”，并在请求完成时执行函数“hideAnimation”

如果您不使用jQuery并且需要纯javascript，只需将$（“#loadingicondiv”）替换为以下代码

document.getElementById('loadingicondiv').style.display = 'none'

---

注意：如果您的网站上有一些频繁的更新，而您不想显示动画，只需将动画的显示与全局变量相关，在发送那些您不希望显示动画的特殊请求之前，将全局变量设置为false。当他们完成请求时，不要忘记将其设置为true。

试图避免每秒轮询服务器。我在想一些事情，比如能够检查窗口对象的状态，以知道它指向的位置（文件）是否已加载（如果有意义的话）。比如说window.location=href，当url的html加载时，windows onLoad事件被调用，对吗？只是在我的例子中，href指向一个文件……那么windows onload会被调用吗？我不知道我说的是否有道理……我对javascript和所有东西都是新手。@hese：当你在窗口中加载一个页面时，文档会有事件，但当你加载Excel文档时，它不会加载到文档对象中。根据浏览器与office应用程序的集成方式，它甚至可能无法在浏览器窗口中打开。如何在angular中执行相同操作？仅适用于firefox，cf：请参见此处，它是一个音频文件，但适用于任何其他类型的文件。

    #loadingicondiv{
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0, 0.3);
        position: fixed;
        z-index: 9999;
    }

    function showAnimation(){
        $('#loadingicondiv').css({display : ''});
    };

    function hideAnimation(){
        $('#loadingicondiv').css({display : 'none'});
    };

    $(document).ajaxStart(showAnimation).ajaxStop(hideAnimation);

document.getElementById('loadingicondiv').style.display = 'none'