0

バックグラウンドでロードするのに数秒かかるファイルを取得しようとしているので、同時にスピナーを表示できます。

現在、バックグラウンドでiframeを試していますが、これは機能しますが、ロードが完了したときに通知を受け取る方法がわかりません(スピナーを削除できます)。

これを行う良い方法はありますか？iframe よりも優れたソリューションはありますか?

これまでの私のコードは次のとおりです。

<script>
    $(document).ready(function() {
        var link = $('.generate-pdf');

        link.click(function(e) {
            e.preventDefault();
            var spinner = $("<img src='/assets/images/ajax-loader.gif' />");
            var iframe = $('<iframe src="' + link.attr('href') + '" style="height:0;width:0;visibility;hidden;display:none;"></iframe>');
            link.before(spinner);
            link.before(iframe);

        });
    })
</script>

このサイトによると、私の場合、イベントを受け取ることは保証できませんContent-disposition。attachmentiframe のプロパティをポーリングして調べることはできますか?

4

2 に答える 2

0

最後に、サーバーに接続して、ファイルがブラウザーに送信されたかどうかを確認する必要がありました。私はまだ純粋なクライアントベースの実装を見たいと思っています.

ありがたいことに、ダウンロードは PHP で生成されたので、これで問題ありませんでした。

<script>
    $(document).ready(function() {
        var link = $('.generate-pdf');

        link.click(function(e) {
            e.preventDefault();
            var spinner = $("<div class='spinner'><img src='/assets/images/ajax-loader.gif' /><span>Your PDF is being generated...</span></div>");
            var downloadKey = new Date().getTime();
            var iframe = $('<iframe src="' + link.attr('href') + '&downloadKey='+downloadKey+'" style="height:0;width:0;visibility;hidden;display:none;" onload="alert(\'hello\')"></iframe>');
            link.before(spinner);
            link.before(iframe);

            var hasFinished = function(downloadKey, callback) {
                var that = this;
                $.ajax({
                    url: "index.php?controller=is-download-finished&downloadKey=" + downloadKey,
                    success: function(data) {
                        if (data) {
                            callback();
                        } else {
                            setTimeout(function() {
                                that(downloadKey, callback);
                            }, 1000);
                        }
                    }
                })
            };
            hasFinished(downloadKey, function() {
                spinner.remove();
                iframe.remove();
            });

        });
    })
</script>

追加のリクエストは、JSON の true または false を返すだけです。

于 2012-10-10T09:44:01.217 に答える