在动态iframe中加载图像

Question

我有一个问题，我在动态创建iframe（所以没有URL），并在该框架上执行打印。我第一次打印（在ff中）它不显示图像，因为它们没有加载。是否有可能使用jQuery或香草JS强制打印等待iframe加载其中的所有图像？我的相关代码如下所示：

render: function (data, $el) { 
    var index = $('a.myframe').index($el); 
    $el.attr('data-print-frame', 'print-frame-' + index); 
    this.populateTemplate(data, index); 
    this.printData('print-frame-' + index, index); 

    return this; 
}, 
populateTemplate: function(data, index) { 
    if(!$('iframe[name=print-frame-' + index + ']').length) { 
     var iframehtml = ''; 
     var iframe = $('<iframe class="print-frame" name="print-frame-' + index + '" />'); 
     $('#content-area').append(iframe); 
     var $stylesheets = $('*[rel=stylesheet]').clone(); 
     var inlineStyles = ''; 
     $stylesheets.each(function(i,e) { 
      $stylesheets[i].href = $stylesheets[i].href; 
      $stylesheets[i].href = $stylesheets[i].href.replace('debug=true', 'debug=false'); 
      $.ajax({ 
       url: $stylesheets[i].href, 
       dataType: 'text', 
       async: false, 
       success: function(styledata) { 
        inlineStyles += styledata; 
       } 
      }); 
     }); 
     iframehtml = '<div class="print"><div id="wrapper">' + this.template(data) + '</div></div>'; 
     iframe[0].contentDocument.head.innerHTML = '<style type="text/css">' + inlineStyles + '</style>'; 
     iframe[0].contentDocument.body.innerHTML = iframehtml; 
    } 
}, 
printData: function(printId) { 
    //this is the part that is not working 
    $('iframe[name="' + printId + '"]').load(function() { 
     window.frames[printId].focus(); 
     window.frames[printId].print(); 
    }); 
    //this is the part that is not working 
} 

所以附加的HTML包含图像，我需要在第一次点击iframe时显示图像。谢谢！

Answer 1

请尝试使用帧文件已准备好的事件。

printData: function(printId) { 

     $(window.frames[printId].document).ready(function() { 
      window.frames[printId].focus(); 
      window.frames[printId].print(); 
     }); 

    }