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

Greetings Andrew, one question...it automatically shows a save dialog for the pdf file in IE, Firefox. How can I supress that. I tried setting the src of iframe using javascript but it still shows that save dialog — Imran Omar Bukhsh, Dec 04 '11 at 09:42

score 49 · Answer 1 · edited Jun 25 '19 at 14:03

49

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!

edited Jun 25 '19 at 14:03

kiswa

14,737
1
21
29

answered Jan 23 '09 at 15:41

Andrew Bullock

36,616
34
155
231

1

Thanks for this script Andrew. However you did leave one piece out that makes it work in IE 8. Please see my post below – M.W. Felker May 26 '10 at 16:07
Ie, webkit, mozilla. should work in opera, but lets face it, who uses that? – Andrew Bullock Jan 21 '11 at 10:44
@Max I've updated my answer to include your edit, this page keeps getting hits so i thought it would be helpful :) – Andrew Bullock Mar 02 '11 at 10:19
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() – M.W. Felker Mar 04 '11 at 14:37
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". – Aqeel Zafar Nov 30 '11 at 14:47
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? – jolo Dec 09 '11 at 15:20
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 Feb 02 '12 at 00:45
5

@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. – mutex Feb 02 '12 at 01:11
`.printPage()` seems to be unavailable in current Chrome (100), but `.print()` works just fine. – Tomalak Apr 13 '22 at 12:20

score 42 · Accepted Answer · answered Jan 23 '09 at 15:18

42

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

iframe:

function printMe() {
  window.print()
}

parent:

document.frame1.printMe()

answered Jan 23 '09 at 15:18

Diodeus - James MacFarlane

112,730
33
157
176

9

How did you get document.frame1 to work? I had to use this instead: document.getElementById('frame1').contentWindow.printMe() – Andres Jaan Tack Jun 09 '09 at 16:44
2

Use the NAME property, not the ID. – Diodeus - James MacFarlane Jun 09 '09 at 17:46
2

It is not working in IE8.It is printing all the contents (outside of iframe also).Any idea please.. – DonX Feb 08 '10 at 07:09
Check your print settings. The browser controls this, not the page. – Diodeus - James MacFarlane Feb 08 '10 at 15:21
1

not work in ios/chrome.It still print the parent content – Devin Gong Jul 25 '19 at 09:04

score 34 · Answer 3 · answered May 26 '10 at 16:10

34

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

answered May 26 '10 at 16:10

M.W. Felker

4,777
1
20
19

at 'ifWin.printPage()' where is printpage method? I tried writing separate printpage method but it is not accessing? – Pearl Dec 13 '13 at 12:09
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). – M.W. Felker Dec 30 '13 at 22:36
2

Does this work on mobile devices such as android? Thanks. – eastwater May 26 '17 at 22:57
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 – M.W. Felker Jun 08 '17 at 14:37
`.printPage()` seems to be unavailable in current Chrome (100), but `.print()` works just fine. – Tomalak Apr 13 '22 at 12:19

score 8 · Answer 4 · answered Apr 20 '11 at 15:52

8

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

answered Apr 20 '11 at 15:52

serdar

570
5
15

1

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. – Sean Anderson May 28 '13 at 23:34

score 4 · Answer 5 · edited Apr 07 '14 at 17:14

4

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>

edited Apr 07 '14 at 17:14

Taryn

242,637
56
362
405

answered Oct 28 '10 at 15:42

Luis Garcia

49
1

score 4 · Answer 6 · answered Dec 07 '11 at 21:23

I had to make few modifications in order to make it with in IE8 (didn't test with other IE flavours)

1) document.frames[param] seem to accept a number, not ID

printIframe(0, 'print');

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

  ifWin.focus();
  ifWin.printPage();

  return false;
}

2) I had a print dialog displayed upon page load and also there was a link to "Click here to start printing" (if it didn't start automatically). In order to get it work I had to add focus() call

<script type="text/javascript">
  $(function(){
    printPage();
  });

  function printPage()
  {
    focus();
    print();
  }
</script>

score 3 · Answer 7 · answered Dec 07 '10 at 15:22

3

One thing to note is if you are testing this locally using file:///, it will not work on chrome as the function in the iframe will appear as undefined. However once on a web server it will work.

answered Dec 07 '10 at 15:22

Blake Hancock

41
2

score 0 · Answer 8 · answered Jan 21 '15 at 14:37

0

You can use

parent.frames['id'].print();

Work at Chrome!

answered Jan 21 '15 at 14:37

Rogerio de Moraes

1,527
18
15

LENG UNG · Answer 9 · 2016-02-12T03:44:10.453

0

You can also use

top.iframeName.print();

or

parent.iframeName.print();

edited Feb 12 '16 at 03:44

answered Feb 12 '16 at 00:08

LENG UNG

473
6
5

score 0 · Answer 10 · answered Jun 22 '17 at 04:50

0

The 'framePartsList.contentWindow.print();' was not working in IE 11 ver11.0.43

Therefore I have used framePartsList.contentWindow.document.execCommand('print', false, null);

answered Jun 22 '17 at 04:50

Imran Khan Hunzai

304
1
3
17

score 0 · Answer 11 · answered Dec 01 '22 at 21:32

0

In Chrome:

Press Ctrl+Shift+C to select the iframe.
Click anywhere in the iframe.
Go to the console tab and type window.print();

This works because in Chrome Dev Tools, the window element adjusts to whatever <html> context you are in.

answered Dec 01 '22 at 21:32

Elijah Mock

587
8
21

score -4 · Answer 12 · edited Nov 24 '11 at 09:30

-4

Use this:

window.onload = setTimeout("window.print()", 1000);

edited Nov 24 '11 at 09:30

Aziz Shaikh

16,245
11
62
79

answered Nov 24 '10 at 15:35

YTmGeorge

1
1

Please add a complete code,Not understanding how to use this. – SwR Apr 26 '16 at 04:36

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

12 Answers12

Linked

Related