Question

我的问题非常类似于此问题：Downloading large files with jQuery & iFrame - Need a File Ready event so I can hide the loading gif 我需要下载一个excel报告，当它生成时我想显示一些生成正在进行的gif。下载报告后我想隐藏这个gif动画。这就是我写的：

//...
    } else if(dest == "xls") {
        Main.pm.showLoadingMessage(); //Show progress gif
        var iframeId = "currentReportIframe";
        $("#" + iframeId).remove();

        var iframe = $("<iframe/>").attr({
            id: iframeId,
            src: "./services/ReportsResource/getCurrentViewReport?" + common,
            style: "visibility:hidden;display:none"
        });


        iframe.load(function() {
            Main.pm.hideLoadingMessage(); //Hide progress gif
        });

        $('body').append(iframe);

        return false;
    }
//...

不幸的是，这个解决方案在谷歌浏览器中不起作用（至少在第44版），但在Firefox中运行良好。

我也尝试过上述问题的解决方案。但是，它会立即隐藏我的进度条，所以我甚至不会在屏幕上看到它。

我有什么想法可以解决我的问题？

UPD： @ a-wolff ，感谢您的评论。当我在设置onload之前设置src回调时，即使没有发送请求也是如此。这就是我的尝试：

        Main.pm.showLoadingMessage(); 
        var iframeId = "currentReportIframe";
        $("#" + iframeId).remove();

        var iframe = $("<iframe/>").attr({
            id: iframeId,
            style: "display:none"
        });

        $("#" + iframeId).load(function() {
            Main.pm.hideLoadingMessage();
        });

        $("#" + iframeId).attr('src', './services/ReportsResource/getCurrentViewReport?' + common);

        $('body').append(iframe);

@epoch 在我的情况下，回调函数会触发一次，但由于我在Chrome控制台中收到某种警告消息，它可能不会第二次触发：

Resource interpreted as Document but transferred with MIME type application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

由于我下载了Excel电子表格（* .xlsx），因此我在服务器端设置了适当的MIME类型。

Answer 1

尝试在加载事件中使用计数器（根据此问题的答案jQuery iframe load() event?）iframe加载事件可能会被触发2次，ono在空的iframe上，一个在加载完成时

fire = 0;
iframe.load(function() {
    if(fire==1)
    Main.pm.hideLoadingMessage(); //Hide progress gif
    fire++;
});

加载iframe后，回调函数不会运行

1 个答案: