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请求，以确定下载的状态。

Answer 3

此代码适用于jQuery，但经过简单的修改也适用于javascript。有了这个，您根本不需要更改您的请求代码。

创建一个包含动画的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>

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



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

在嵌入的js文件中输入



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

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

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

最后一行使得Web应用程序发送的每个请求都在开始时执行功能“ showAnimation”，并在请求完成后执行功能“ hideAnimation”。

如果您不使用jQuery并且需要纯JavaScript，只需将$（'＃loadingicondiv'）替换为以下代码

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

注意：如果您不想在网站上进行频繁的更新（不想显示该动画），只需使动画的显示依赖于全局变量，在发送这些特殊变量之前，将其设置为false请求，您不希望显示动画。并且当他们完成请求时，别忘了将其设置为true。

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

3 个答案: