How do I print an IFrame from javascript in Safari/Chrome

Question

Can someone please help me out with printing the contents of an IFrame via a javascript call in Safari/Chrome.

This works in firefox:

$('#' + id)[0].focus();
$('#' + id)[0].contentWindow.print();

this works in IE:

window.frames[id].focus();
window.frames[id].print();

But I can't get anything to work in Safari/Chrome.

Thanks

Andrew

Solution 1

Put a print function in the iframe and call it from the parent.

iframe:

function printMe() {
  window.print()
}

parent:

document.frame1.printMe()

Solution 2

Here is my complete, cross browser solution:

In the iframe page:

function printPage() { print(); }

In the main page

function printIframe(id)
{
    var iframe = document.frames
        ? document.frames[id]
        : document.getElementById(id);
    var ifWin = iframe.contentWindow || iframe;

    iframe.focus();
    ifWin.printPage();
    return false;
}

Update: Many people seem to be having problems with this in versions of IE released since I had this problem. I do not have the time to re-investigate this right now, but, if you are stuck I suggest you read all the comments in this entire thread!

Solution 3

I used Andrew's script but added a piece before the printPage() function is called. The iframe needs focus, otherwise it will still print the parent frame in IE.

function printIframe(id)
{
    var iframe = document.frames ? document.frames[id] : document.getElementById(id);
    var ifWin = iframe.contentWindow || iframe;
    iframe.focus();
    ifWin.printPage();
    return false;
}

Don't thank me though, it was Andrew who wrote this. I just made a tweak =P

Solution 4

In addition to Andrew's and Max's solutions, using iframe.focus() resulted in printing parent frame instead of printing only child iframe in IE8. Changing that line fixed it:

function printIframe(id)
{
    var iframe = document.frames ? document.frames[id] : document.getElementById(id);
    var ifWin = iframe.contentWindow || iframe;
    ifWin.focus();
    ifWin.printPage();
    return false;
}

Solution 5

Use firefox window.frames but also add the name property because that uses the iframe in firefox

IE:

window.frames[id]

Firefox:

window.frames[name]

<img src="print.gif"  onClick="javascript: window.frames['factura'].focus(); parent['factura'].print();">
<iframe src="factura.html" width="100%" height="400" id="factura" name="factura"></iframe>

View more solutions

Comments

[Diodeus - James MacFarlane]

Use the NAME property, not the ID.

[DonX]

It is not working in IE8.It is printing all the contents (outside of iframe also).Any idea please..

[Diodeus - James MacFarlane]

Check your print settings. The browser controls this, not the page.

[M.W. Felker]

Thanks for this script Andrew. However you did leave one piece out that makes it work in IE 8. Please see my post below

[Andrew Bullock]

Ie, webkit, mozilla. should work in opera, but lets face it, who uses that?

[Andrew Bullock]

@Max I've updated my answer to include your edit, this page keeps getting hits so i thought it would be helpful :)

[M.W. Felker]

Also Andrew, I had another thought. You don't need to define a new function printPage on the child page because you're just calling the print function anyways. so the second to last line can just look like this: ifWin.print()

[Aqeel Zafar]

Is it still working with latest Chrome? I just tried it on latest Chrome (ver 15), and it says "Print is unavailable because the page you are trying to print is closed".

[jolo]

I can't get this to work in IE7, 8 and I think 9. It prints the whole browser contents, not just the iFrame. The only thing I can think of that I'm doing differently is that I'm writing to the iframe document itself via .write() instead of using an href to get the data. Help anyone?

[mutex]

Same issue as @jolo and it is driving me up the wall! Did you find a solution or anybody else have ideas!? BTW: I am using a href, so that doesn't seem to be the issue. And my iframe does NOT have visibility: hidden or anything like that....

[mutex]

@AndrewBullock for those people still facing issues even when using your script, can I suggest you add a note to check doctypes and html header. Both my parent and iframe page used html5boilerplate (so html5 and some conditionals at the top) and IE refused to print just the iframe (it always printed the parent) when I changed either of the pages to xhtml and removed the conditionals, then the iframe prints correctly without parent. Why oh why is it always only IE causing such headaches!! :) Might be helpful to have a pointer to this area if people find your script doesn't work.

[Sean Anderson]

It's worth noting that the iframe can't be focused properly if it has display: none. You'll see the same issue as before -- you'll need to make it visible, but offscreen.

[Pearl]

at 'ifWin.printPage()' where is printpage method? I tried writing separate printpage method but it is not accessing?

[M.W. Felker]

Hey @Pearl, take a look at Andrews post above. The printPage function must be apart of the document within the iframe and is called by printIframe on the parent document (the one containing the iframe).

[SwR]

Please add a complete code,Not understanding how to use this.

[eastwater]

Does this work on mobile devices such as android? Thanks.

[M.W. Felker]

That is a good question - I have not tested it myself. This was a solution that we worked on in 2011 and it's been 6 years so printer + browser support has drastically changed. This may not even be necessary on mobile but in the case that you do need something like this, the concept should still work. Essentially we are targeting a specific frame node in the DOM and calling the print() method. Let us know what happens :D

[Devin Gong]

not work in ios/chrome.It still print the parent content

[Tomalak]

.printPage() seems to be unavailable in current Chrome (100), but .print() works just fine.

[Tomalak]

.printPage() seems to be unavailable in current Chrome (100), but .print() works just fine.