1

ユーザーがボタンをクリックして結果をエクスポートできる Web アプリケーションがあります。私が知る限り、JavaScript からファイルの「ダウンロード」を開始することはできないため、単純なサーバー ラウンド トリップを使用してダウンロードを開始します。

  1. ユーザーがエクスポート ボタンをクリックする
  2. 一部の JavaScript は、ファイルに必要なデータを含む非表示のフォーム フィールドを作成します。
  3. フォーム送信がトリガーされる
  4. サーバーはフォーム データを受け取り、それをファイルとしてユーザーに送り返します。
  5. ファイルのダウンロードがトリガーされます

データのアップロードに時間がかかる場合があるため、手順 1 の後で、エクスポート ボタンのテキストを「ダウンロードの準備中」に変更します。ブラウザが投稿リクエストからの応答をいつ受信し始めたかを知る方法はありますか?

4

1 に答える 1

0

このソリューションを使用してみました：

  1. ページに非表示の iframe を追加する
  2. target 属性を使用してフォームを iframe に投稿する
  3. iframe の onLoad イベント (フォーム ポストによってトリガーされる) を使用して、ボタンをリセットします。

これは Firefox では機能しますが、サーバーの応答がファイルの場合、Chrome では onLoad イベントがトリガーされません。

私が解決した解決策は、Cookie を使用し、すべてのブラウザーで動作します。

  1. ユーザーがダウンロード ボタンをクリックすると、ランダムな値を含む非表示フィールドがフォームに追加されます。
  2. サーバーで、ランダムな値を含むフォーム フィールドを探し、同じ値で Cookie を設定します。Cookie は、次のサーバー応答で設定されるため、ダウンロードが開始されます。
  3. クライアントで、約 1 秒ごとに 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 に答える