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

JavascriptIframeWebkitPrinting

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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 2 - Javascript

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

iframe:

function printMe() {
  window.print()
}

parent:

document.frame1.printMe()

Solution 3 - Javascript

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 - Javascript

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 - Javascript

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>

Solution 6 - Javascript

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.

Solution 7 - Javascript

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

Solution 8 - Javascript

You can use

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

Work at Chrome!

Solution 9 - Javascript

You can also use

top.iframeName.print();

or

parent.iframeName.print();

Solution 10 - Javascript

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

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

Solution 11 - Javascript

Use this:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAndrew BullockView Question on Stackoverflow
Solution 1 - JavascriptAndrew BullockView Answer on Stackoverflow
Solution 2 - JavascriptDiodeus - James MacFarlaneView Answer on Stackoverflow
Solution 3 - JavascriptM.W. FelkerView Answer on Stackoverflow
Solution 4 - JavascriptserdarView Answer on Stackoverflow
Solution 5 - JavascriptLuis GarciaView Answer on Stackoverflow
Solution 6 - JavascriptBlake HancockView Answer on Stackoverflow
Solution 7 - JavascriptYura OmelchukView Answer on Stackoverflow
Solution 8 - JavascriptRogerio de MoraesView Answer on Stackoverflow
Solution 9 - JavascriptLENG UNGView Answer on Stackoverflow
Solution 10 - JavascriptImran Khan HunzaiView Answer on Stackoverflow
Solution 11 - JavascriptYTmGeorgeView Answer on Stackoverflow