我应该如何提供下载并导航到“谢谢”页面？

Question

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

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

就像这个简化的例子：

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

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

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

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

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

• 延迟“在发送响应标头之前”导致行为中断
• 延迟“在响应标头和文件的前几块发送后”，导致预期行为

这些观察结果似乎适用于所有浏览器 - 因此 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 通常在下载开始时出现，因此不会有很长的延迟。

---

你在评论中说过：

这对 Chrome 和 Firefox 非常有效，但 IE 和 Edge 仍然需要大约 2 秒才能最终执行 window.location = "/files/thankyou"，否则永远不会显示下载。至少 cookie 为我们提供了一个相当可靠的启动计时器的点...？

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

我认为Simon Jensen's approach 有道理：将文件作为查询参数传递给感谢页面，让感谢页面启动下载。这就是我使用的很多网站的做法。 （或者如果您不希望它成为查询参数，您可以使用sessionStorage。）

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