javascript - 我应该如何提供下载并导航到 "thank you"页面？

Question

我有一个网站需要提供文件下载，然后导航到“谢谢”样式页面。

到目前为止，我的方法是使用 window.location = "..." 两次 - 首先让浏览器下载文件，然后再次将用户重定向到“< em>谢谢”页面。

像这个简化的例子:

function do_download(filename) {
  window.location = "/files/" + filename;
  setTimeout(function() {
    window.location = "/files/thankyou";
  }, 750);
}

在本网站的整个开发和测试过程中，这对 Chrome 运行良好，但使用 Firefox、IE 或 Edge 时会出现问题 - 用户永远不会看到文件下载，而只是被重定向到“谢谢”页面。从服务器的 Angular 来看，请求已发出并随后中止。

将 750 毫秒超时更改为 2.5 秒使此类浏览器更加可靠，但现在我们似乎遇到了计时问题，我已经确认...

如果发出请求和开始收到响应的时间超过超时时间，则下载将被丢弃/中止，情况将是“中断”(即:没有文件下载，刚刚重定向到“谢谢你”)。

我已经通过在 JavaScript 中使用 2.5 秒延迟并在服务器中插入 3 秒延迟来确认这一点:

• 延迟“在发送响应 header 之前”会导致错误的行为
• 延迟“在发送响应 header 和文件的前几个 block 之后”，导致预期的行为

这些观察似乎适用于所有浏览器 - 因此 Chrome 发出请求的速度可能更快，从而掩盖了最初的问题。

---

使用“大”超时是不合适的，因为如果服务器或网络繁忙，或者延迟很高，这种情况仍然会发生。

window.open() 不适合，因为 Chrome、Firefox 和 Edge 都阻止了“popup”，由于导航远离原始页面。

---

这引出了我的问题:

• 我应该如何以更稳健的方式和将用户重定向到“谢谢”页面？

Answer 1

对于这类事情，我使用零高度 iframe 作为下载链接的目标，让服务器提供带有文件响应的 cookie，并观察 cookie出现:

function do_download(filename) {
  // Trigger the download in the zero-height iframe
  iframe.contentWindow.location = "/files/" + filename;
  var handle = setInterval(function() {
    if (checkForCookie()) {
      window.location = "/files/thankyou";
    }
  }, 100);
  setTimeout(function() {
    // Give up
    clearInterval(handle);
    // ...probably show an error...
  }, 20000);
}

Cookie 通常在下载开始 时出现，因此不会有很长时间的延迟。

---

您在评论中说过:

This works really well for Chrome and Firefox, but IE and Edge still require ~2 seconds before finally performing the window.location = "/files/thankyou", otherwise the download is never presented. At least the cookie gives us a fairly solid point to start the timer...?

@Attie - Blech。 :-) 我想那是因为它破坏了 iframe。可悲的是，我认为像这样的任何固定时间间隔都会让您容易失败(例如，如果下载时间比平时长一点)。 (我在野外使用它的时候，主页保持不变，我只是想删除他们单击下载链接时显示的微调器。)

我认为Simon Jensen's approach有意义:将文件作为查询参数传递给感谢页面，让感谢页面启动下载。我用过的很多网站都是这样做的。 (或者如果您不希望它成为查询参数，您可以使用 sessionStorage 。)

另一种选择是保留页面，只修改 DOM 以表示感谢(这更符合我过去使用此 cookie 技巧的方式)。