Question

我正在尝试获取一个在后台加载需要几秒钟的文件，因此我可以同时显示一个微调器。

我目前正在尝试使用背景中的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>

根据this site，鉴于我的Content-disposition是attachment，我无法保证接收任何活动。我可以轮询iframe上的任何属性来查找吗？

Answer 1

你试过吗

iframe.load(function(){
    log("done");
})

Answer 2

最后，我必须通过联系服务器，查看文件是否已发送到浏览器来完成此操作。我仍然希望看到一个纯粹的基于客户端的实现。

谢天谢地，下载是用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。

在浏览器背景下加载下载，告知何时完成

2 个答案: