在所有 iframe 完成加载后执行回调答案

【问题标题】：execute callback after all iframes finish loading在所有 iframe 完成加载后执行回调
【发布时间】：2014-01-16 16:09:54
【问题描述】：

尝试了一个小的jquery插件，使html输入文件上传控件的用户体验在浏览器之间保持一致。它基本上是一个表单，它有一个嵌套在隐藏 iframe 中的 html 输入控件。

该插件公开了beforeUpload、afterUpload 等事件，我能够正确连接这些事件。

这是我如何调用afterUpload 事件的示例。

$.fn.createUpload = function(config){
    //stuff

    $(myUploadIframe).load(function(){
        var doc = this.contentWindow.document;
        var txt = $(doc).text();

        //parse txt to get json results
        var result = frameWorkParser(txt);

        if(result.uploadSuccess){
            if(config.afterUpload){
                config.afterUpload(sender, result);
            }
        }
    });

    //other stuff
};

这是我使用插件的方式：

var config = {
    afterUpload: function(el, data){
        //set some hidden field
    },
    //other options
};
$('#btnSelectFile').createUpload(config);

如果我以某种方式调用了嵌套表单（即在 iframe 中）提交方法，则 iframe 加载并且我能够成功调用 afterUpload 事件。

但事情变得更加棘手。我正在尝试在所有上传完成后执行一些逻辑。

$.doUploads = function (callback) {
    $('iframe').each(function () {
        if (this.id.indexOf('_uploadContainer') > -1) {
            var doc = this.contentWindow.document;
            doc.forms[0].submit();
        }
    });
    callback();
};

在这里，我正在迭代所有插件创建的 iframe（为上传而创建）并调用嵌套表单提交方法。但是这个调用不会等待后续的 iframe onload 事件完成，然后 callback 就会执行。

我希望回调在我的插件的afterUpload 事件后执行。如何做到这一点？

【问题讨论】：

标签： javascript jquery iframe

【解决方案1】：

设置一些 int 变量（比如totaliframeloaded=0;），它会在每次 iframe 加载时递增。还可以在每次 iframe 加载时调用回调函数。

在回调检查中，该 int 变量的长度是否等于 $('iframe').length。当所有 iframe 都被加载时，这个条件就会被匹配。

if(`totaliframeloaded==$('iframe').length){//all iframes are loaded
//callback coad
}else{
//do nothing/return
}

【讨论】：