加载iframe后,回调函数不运行

After iframe is loaded callback function doesn't run

本文关键字:函数 运行 回调 iframe 加载      更新时间:2023-09-26

我的问题与这个非常相似:使用jQuery下载大文件&iFrame -需要一个文件准备事件,所以我可以隐藏加载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;
    }
//...

不幸的是,这个解决方案不工作在Google Chrome(至少v. 44),但在Firefox工作得很好。

我也尝试了上面问题的解决方案。但是,它立即隐藏了我的进度条,所以我甚至没有在屏幕上看到它。

有什么办法可以解决我的问题吗?

乌利希期刊指南:@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类型。

尝试在加载事件内使用计数器(根据回答这个问题jQuery iframe load()事件?)iframe load事件可能触发2次,一次在空iframe上触发,一次在load finish

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