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

    }

在动态iframe中加载图片

1 个答案: