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

Question

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

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

链接：

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

show-ls 函数只显示加载屏幕：

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

加载屏幕是body中的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 中完成下载文件后隐藏加载屏幕。

Answer 1

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

Answer 2

模糊事件只是一个脆弱的解决方法，它可能在浏览器中有效，也可能无效。

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

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

我能想象的唯一解决方案（和other's, too, as it seems）：当下载开始时，启动一个 JS 间隔，定期（比如每 500 毫秒左右）检查服务器的下载状态。在服务器端，您必须在下载开始时向用户标识下载，并在被询问时将状态回复给客户端。当然，这取决于您使用的服务器环境和编程语言。我知道，你可以让它在 PHP 中工作，但我不知道所有其他语言。

顺便说一句：我将“加载屏幕”称为“加载指示器”，因为加载屏幕（或启动屏幕）是在软件加载之前显示一次的图片（至少在我的计算机/大脑上）。