如何检查文件下载是否在 Chrome 中完成?



当用户单击下载按钮/链接时,页面上会出现加载屏幕。下载过程完成后,我在此按钮上使用onblur事件来隐藏我的加载屏幕。它在任何浏览器中都可以正常工作,但不能在谷歌浏览器中运行。

是否有任何事件侦听器或其他简单的方法可用于Chrome?

链接:

<a href="/resources/foo" class="show-ls" onblur="hideLS()">Download</a>

show-ls 函数仅显示加载屏幕:

$('.show-ls').click(function () {
$('#loading-screen').show();
});

加载屏幕是正文中的div 元素:

<div id="loading-screen" class="loading-screen" style=""></div>
.loading-screen {
background: rgba(255, 255, 255, 0.6) url('/images/loadingscreen.gif') no-repeat fixed center center;
width: 100%;
height: 100%;
position: fixed;
}

hideLS功能只是隐藏加载屏幕:

hideLS= function () {
var loadingScreen = $('div.loading-screen');
if (loadingScreen.length > 0)
loadingScreen.hide();
};

下载过程还可以,加载屏幕也很好。问题仅在于在Chrome中下载文件完成后隐藏加载屏幕。

模糊事件只是一个脆弱的解决方法,可能在浏览器中有效,也可能不适用于浏览器。

blur事件意味着,某些东西正在失去焦点。可能是Firefox浏览器(以及其他浏览器)确实模糊了您单击的链接,但其他任何内容也可能模糊该链接(更改选项卡,单击加载屏幕等)。这是你可能不想要的。

而且由于HTTP是一种无状态协议,因此我们无法在客户端知道在没有服务器帮助的情况下何时完成此操作。而且您不能依靠JS来检测这一点,因为文件的下载是"在不同的选项卡中",在您无权访问的不同上下文中。

我能想象到的唯一解决方案(以及其他解决方案,看起来也是如此):当下载开始时,启动一个JS间隔,定期(如每500毫秒左右)检查服务器的下载状态。在服务器端,您必须在下载启动时向用户标识下载,并在询问时将状态响应回客户端。当然,它的工作原理取决于您使用的服务器环境和编程语言。我知道,你可以让它在PHP中工作,但我不知道所有其他语言。

顺便说一句:我会将"加载屏幕"称为"加载指示器",因为加载屏幕(或启动画面)是在软件加载之前显示一次的图片(至少在我的计算机/大脑上)。

如果您有Google帐户,则只需按Ctrl + J或转到 chrome://downloads/

最新更新