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

Asked 23/1, 2009 at 13:53 Answered 1/12, 2022 at 21:32

Solved javascript iframe webkit printing

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

Fragrance answered 23/1, 2009 at 13:53 Comment(1)

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 – Windowshop 4/12, 2011 at 9:42

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

iframe:

function printMe() {
  window.print()
}

parent:

document.frame1.printMe()

Scurlock answered 23/1, 2009 at 15:18 Comment(5)

How did you get document.frame1 to work? I had to use this instead: document.getElementById('frame1').contentWindow.printMe() – Epistemic 9/6, 2009 at 16:44

Use the NAME property, not the ID. – Scurlock 9/6, 2009 at 17:46

It is not working in IE8.It is printing all the contents (outside of iframe also).Any idea please.. – Nescience 8/2, 2010 at 7:9

Check your print settings. The browser controls this, not the page. – Scurlock 8/2, 2010 at 15:21

not work in ios/chrome.It still print the parent content – Laureenlaurel 25/7, 2019 at 9:4

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!

Fragrance answered 23/1, 2009 at 15:41 Comment(9)

Thanks for this script Andrew. However you did leave one piece out that makes it work in IE 8. Please see my post below – Term 26/5, 2010 at 16:7

Ie, webkit, mozilla. should work in opera, but lets face it, who uses that? – Fragrance 21/1, 2011 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 :) – Fragrance 2/3, 2011 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() – Term 4/3, 2011 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". – Indignation 30/11, 2011 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? – Dunlavy 9/12, 2011 at 15:20

Same issue as @Dunlavy 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.... – Delly 2/2, 2012 at 0:45

@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. – Delly 2/2, 2012 at 1:11

.printPage() seems to be unavailable in current Chrome (100), but .print() works just fine. – Shaniceshanie 13/4, 2022 at 12:20

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

iframe:

function printMe() {
  window.print()
}

parent:

document.frame1.printMe()

Scurlock answered 23/1, 2009 at 15:18 Comment(5)

How did you get document.frame1 to work? I had to use this instead: document.getElementById('frame1').contentWindow.printMe() – Epistemic 9/6, 2009 at 16:44

Use the NAME property, not the ID. – Scurlock 9/6, 2009 at 17:46

It is not working in IE8.It is printing all the contents (outside of iframe also).Any idea please.. – Nescience 8/2, 2010 at 7:9

Check your print settings. The browser controls this, not the page. – Scurlock 8/2, 2010 at 15:21

not work in ios/chrome.It still print the parent content – Laureenlaurel 25/7, 2019 at 9:4

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

Term answered 26/5, 2010 at 16:10 Comment(5)

at 'ifWin.printPage()' where is printpage method? I tried writing separate printpage method but it is not accessing? – Dessertspoon 13/12, 2013 at 12:9

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). – Term 30/12, 2013 at 22:36

Does this work on mobile devices such as android? Thanks. – Didst 26/5, 2017 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 – Term 8/6, 2017 at 14:37

.printPage() seems to be unavailable in current Chrome (100), but .print() works just fine. – Shaniceshanie 13/4, 2022 at 12:19

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

Merkley answered 20/4, 2011 at 15:52 Comment(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. – Sherrylsherurd 28/5, 2013 at 23:34

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>

Eatable answered 28/10, 2010 at 15:42 Comment(0)

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>

Marathon answered 7/12, 2011 at 21:23 Comment(0)

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.

Thill answered 7/12, 2010 at 15:22 Comment(0)

You can use

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

Work at Chrome!

Grecian answered 21/1, 2015 at 14:37 Comment(0)

You can also use

top.iframeName.print();

parent.iframeName.print();

Secor answered 12/2, 2016 at 0:8 Comment(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);

Mekong answered 22/6, 2017 at 4:50 Comment(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.

Thready answered 1/12, 2022 at 21:32 Comment(0)

-4

Use this:

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

Groningen answered 24/11, 2010 at 15:35 Comment(1)

Please add a complete code,Not understanding how to use this. – Fullblooded 26/4, 2016 at 4:36

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags