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

【问题标题】：javascript: how to show spinner until file downloadsjavascript：如何在文件下载之前显示微调器
【发布时间】：2011-08-11 02:19:53
【问题描述】：

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

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

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

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

有什么想法吗？

谢谢。

【问题讨论】：

见这里stackoverflow.com/questions/33902299/… 它是一个音频文件，但它适用于任何其他类型的文件。

标签： javascript download

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

【讨论】：

仅适用于 Firefox，参见：stackoverflow.com/questions/20572734/…

【解决方案2】：

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

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

【讨论】：

试图避免每秒轮询一次服务器。我正在考虑诸如能够检查窗口对象的状态以了解它指向（文件）的位置是否已加载（如果有意义的话）。
就像当你说window.location = href时，当url的html加载时windows onLoad事件被调用对吗？只有在我的情况下，href 指向一个文件......那么 windows onload 会被调用还是什么？我不知道我说的是不是有道理...我是 javascript 的新手。
@hese：当您在窗口中加载页面时，文档有事件，但是当您加载 Excel 文档时，它不会加载到文档对象中。根据浏览器与办公应用程序的集成方式，它甚至可能无法在浏览器窗口中打开。
如何在 Angular 中做同样的事情？

【解决方案3】：

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

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


    &ltdiv id="loadingicondiv">
    &ltdiv id="loadingicon" style="background:url('imgs/logo.png') center no-repeat;opacity:1.0;display:none;position:absolute;z-index: 9999;">&lt/div>&lt/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);

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

如果你不使用 jQuery 并且需要纯 javascript，只需将 $('#loadingicondiv') 替换为以下代码

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

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

【讨论】：