page with iframes prints blank iframes

Question

I have a page with iframes. The iframes show in the browsers, but when I either print previerw or print in IE8, sometimes some or all of the frames are blank. And by that I mean the frame and div is there but there is no content.

The structure of the frame area is as follows:

<div id="container">
    <div id="frames">
        <iframe src="about:blank" name="FRAME0"></frame>
    </div>
</div>

Forms have the iframes as targets.

Sometimes they print when using sheet size C, but the majority of the time they do not print. Usually the first two iframes print and I have noticed that they are on the same page.

The function I am using to print is:

function printNow() {
    print();
}

I have tried focus() then print(), self.print(), window.print(), top.window.print(), etc.

Please tell me is this is an issue with IE8 or an issue that I can overcome with javascript. I am forced to only use javascript. Someone working on the project has a similar version for IE7 and they do not experience this problem less the iframe has a pdf file. There is css applied to iframe (ie, width: 100% ) and the iframes are can be conditionally hidden if a checkbox is selected using display:none .

Answer 1

You can use html2canvas to render iframes before print

$('iframe').each(function() {
    var iframe = $(this);
    html2canvas(iframe[0].contentDocument.body, {
        onrendered: function(canvas) {
            var wrapper = iframe.hide().wrap('<div/>').parent().css({
                position: 'relative'
            });
            $(canvas).css('postion', 'absolute').appendTo(wrapper);
        },
        width: iframe.width(),
        height: iframe.height()
    });
});