javascript - 在动态 iframe 中加载图像

Question

我遇到一个问题，我正在动态创建 iframe(因此没有 URL)，并在该框架上执行打印。我第一次点击打印(在 ff 中)时，它没有显示图像，因为它们尚未加载。是否可以使用 jQuery 或 vanilla 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

请尝试使用框架文档 onready 事件。

 printData: function(printId) {

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

    }