1

我有一个 Web 应用程序，用户可以通过单击按钮导出结果。据我所知，无法从 javascript 启动文件“下载”，因此我使用简单的服务器往返开始下载：

  1. 用户单击导出按钮
  2. 一些 javascript 创建一个隐藏的表单字段，其中包含我想要在文件中的数据
  3. 触发表单提交
  4. 服务器获取表单数据并将其作为文件发送回用户
  5. 触发文件下载

由于上传数据可能需要一些时间，我在第 1 步之后将导出按钮上的文本更改为“准备下载”。在第 4 步或第 5 步左右，我想将按钮改回正常状态。有什么方法可以知道浏览器何时开始接收来自发布请求的响应？

4

1 回答 1

0

我尝试使用此解决方案：

  1. 向页面添加不可见的 iframe
  2. 使用 target 属性让表单发布到 iframe
  3. 使用 iframe 的 onLoad 事件（由表单帖子触发）重置我的按钮

这适用于 Firefox，但当服务器响应是文件时，不会在 Chrome 中触发 onLoad 事件。

我选择的解决方案使用 cookie 并适用于所有浏览器：

  1. 当用户单击下载按钮时，将一个隐藏字段添加到包含随机值的表单中。
  2. 在服务器上，查找包含随机值的表单字段并设置具有相同值的 cookie。cookie 将与下一个服务器响应一起设置，因此当下载开始时。
  3. 在客户端上，每隔一秒左右开始轮询 cookie 以查找步骤 1 中的随机值。
  4. 一旦客户端找到该值，重置按钮。

这是下载按钮的事件处理程序中的相关代码，它是#nonce我放置随机值的隐藏字段：

var nonce = Math.random();                      // generate random number
$("#nonce").val(nonce);                         // set number as field value
$("#downloadDataset").button('loading');        // set button to loading state
var downloadTimer = setInterval(function () {   // start polling the cookies
    if (document.cookie.indexOf(nonce) != -1) {
        $("#downloadDataset").button('reset');  // reset button
        clearInterval(downloadTimer);           // stop polling the cookies
    }
}, 1000);                                       // check every 1000ms
于 2013-11-03T17:51:06.863 回答