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?

Answer 1

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.

Answer 2

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>

Answer 3

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.