在動態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(); 
     }); 

    }