Print iframe content in Opera and Chrome

Question

I'm trying to print iframe content.

contentWindow.focus();
contentWindow.print();

This code works in IE, Firefox and Safari. But don't work in Chrome and Opera. These browsers print entire page.

I tried to use this topic How do I print an IFrame from javascript in Safari/Chrome. But it didn't help me.

Could someone help me?

From the linked article it seems like at least for Chrome you should have success. Is the iframe on a different domain? — Paul, Nov 02 '09 at 09:59

score 5 · Accepted Answer · answered Dec 03 '09 at 13:08

This is a known bug in Opera. In addition to the above ideas for workarounds, you may want to play with something like this:

    var clone=document.documentElement.cloneNode(true)
    var win=window.open('about:blank');
    win.document.replaceChild(clone, win.document.documentElement);
    win.print();

I have not tested this but it should create a copy of the page in a popup window and print it, without having to load the content a second time from the server or loosing any DOM modifications you may want printed.

score 2 · Answer 2 · answered Nov 02 '09 at 05:22

As I understand, it's impossible to implement iframe printing without opening new window.

My print function:

if ($.browser.opera || (/chrome/.test(navigator.userAgent.toLowerCase()))) {
  var href = contentWindow.location.href;
  href = href.indexOf("?") > -1 ? href + "&print=1" : href + "?print=1";
  var printWindow = window.open(href, "printWindow", "scrollbars=yes");
  printWindow.focus();
}
else {
  contentWindow.focus();
  contentWindow.print();
}

Also I added the following code to the end of the body (when print==1):

<script type='text/javascript'>
  function invokePrint() {
    if (document.readyState && document.readyState!='complete')
      setTimeout(function() { invokePrint(); }, 50);
    else if (document.body && document.body.innerHTML=='false')
      setTimeout(function() { invokePrint(); }, 50);
    else {
      focus();
      print();
    }
  }
  invokePrint();
</script>

score 1 · Answer 3 · answered Nov 02 '09 at 18:12

I cannot reproduce your problem with Chrome. Opera, however, does indeed still print the entire outer page when trying to only print the iframe.

I have devised a workaround and although it does work mostly, it is not 100% failsafe (amongst others because Opera wraps lines for printing; I don't know how to calculate the correct height in such cases). That said, the following code works at least reasonable (using jQuery for convenience):

if ($.browser.opera) {
    var ifr     = $('#youriframe');
    var ifrbody = ifr.get(0).contentDocument.body;
    var sheet   = $([
        '<style type="text/css" media="print">',
        'body * {',
        ' display: none;',
        '}',
        '#youriframe {',
        ' border: none;',
        ' display: block;',
        ' height: ', ifrbody.scrollHeight, 'px;',
        ' margin: 0px;',
        ' padding: 0px;',
        ' width: ', ifrbody.scrollWidth, 'px;',
        '}',
        '<\/style>'
    ].join(''));
    $('head').append(sheet);
    window.print();
    sheet.remove();
}

Hope this helps.

score 0 · Answer 4 · answered Apr 19 '12 at 10:46

I tried above code and after making changes to the above codes I came with conclusive code as follows

var win=window.open('about:blank');
win.document.write('<html><head></head><body>'); 
win.document.write('<iframe frameBorder="0" align="center" src="'+window.location.href+'" onload="test()" style="width: 619px; height: 482px;"></iframe>'); 
win.document.write('<scr'+'ipt>function test(){window.focus();window.print()}</sc'+'ript></body></html>'); 
win.document.close(); 
if (window.focus) {win.focus()}

try this one

Print iframe content in Opera and Chrome

4 Answers4

Linked

Related