在所有iframe完成加載后執行回調

Question

試用一個小的jquery插件，以使html輸入文件上載控件的用戶體驗在瀏覽器之間保持一致。 它的形式基本上是一個HTML輸入控件，該控件嵌套在一個隱藏的iframe中。

該插件公開了諸如beforeUpload ， afterUpload等事件，並且我能夠正確連接這些事件。

這是我如何調用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內）submit方法， afterUpload加載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（為上傳而創建），並調用嵌套表單的commit方法。 但此調用不會等待隨后的iframe onload事件完成，而是執行callback 。

我希望回調在插件的afterUpload事件之后執行。 如何做到這一點？

Answer 1

設置一些int變量（例如totaliframeloaded=0; ），該變量在每次iframe加載時都會遞增。 還會在每次加載iframe時調用回調函數。

在回調檢查中，該int變量的長度是否等於$('iframe').length 。 當所有iframe都加載后，此條件將得到匹配。

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