Printing an iframe from outside

**molendijk** · 03-17-2012, 08:59 PM

1) CODE TITLE:
Printing an iframe from its parent without opening a popup window

2) AUTHOR NAME: Arie Molendijk

3) DESCRIPTION:
There are many scripts out there that allow us to print an iframed page 'from outside', that is, not from within the iframed page itself, but from (a link on) its parent page. Most of those scripts use popup windows into which the iframe's content is first document.written and then sent to the printer from inside the popup.
Now, there is always a chance that popup blockers prevent the scripts (using popups) to function. So I looked for a way to 'do it without popups'. I found several scripts that seemed to do the job, except that IE7 - and maybe other versions too - did not print the iframed page itself, but the parent(!) and the visible part (only) of the iframed page. This is true, for instance, for the following script found at http://stackoverflow.com/questions/2...-popup-window:

Code:

<button onclick="printPage()">print</button>
<div id="printerDiv" style="display:none"></div>
<script>
function printPage()
{
var div = document.getElementById("printerDiv");
div.innerHTML = '<iframe src="mypage.aspx" onload="this.contentWindow.print();"></iframe>';
}
</script>

I then decided that, given the fact that printing a page from a link inside an iframe never poses a problem, the most secure way of printing an iframed page from outside is to simulate the technique used for printing from inside (simply using inbuilt function print()). Printing from outside, then, means that we make a copy of the iframed page, to which we add a print button (or something similar). After the information of the copy has been sent to the printer, the copy is removed or made invisible. Example:

Code:

<!DOCTYPE html>
<html>

<head>

<title>Print Iframe From Parent</title>

<style>
body {font-family: verdana; font-size:12px}
</style>

<script>
var header_friendly='<div style="position: relative; text-align: center; border-bottom: 2px solid black; font-family: verdana; font-size: 11px; padding: 5px; padding-top: 1px; color: darkred">This is a printer friendly version of the page. Click <button style="cursor: pointer" onclick="window.print(); parent.document.getElementById(\'ifr_friendly\').style.left=\'-10000px\'">PRINT</button> to print it. Click <button style="cursor: pointer" onclick="parent.document.getElementById(\'ifr_friendly\').style.left=\'-10000px\'">CLOSE</button>  to close this window without printing.<\/div>'

function printer_friendly(which,left,top,width,height)
{
frames['ifr_friendly'].document.body.innerHTML=header_friendly+frames[which].document.body.innerHTML; 
document.getElementById('ifr_friendly').style.left=left; 
document.getElementById('ifr_friendly').style.top=top; 
document.getElementById('ifr_friendly').style.width=width; 
document.getElementById('ifr_friendly').style.height=height;
}
</script>

</head>

<body><div>

<!-- Order: name of the printer-friendly-iframe, left, top, width, height  -->
<a href="javascript: void(0)" onclick="printer_friendly('ifr', '5%', '5%', '90%', '90%')">Print Iframe</a>

<h2 style="text-align: center">Printing an iframe from its parent without opening a popup window</h2>

<iframe id="ifr" name="ifr" style="position:absolute; left:15%; top: 15%; width: 70%; height: 70%;" src="iframed.html"></iframe>

<!-- The printer friendly window -->
<iframe id="ifr_friendly" name="ifr_friendly" style="position:absolute;z-index:10000; background:white; left: -10000px; border:1px solid black" ></iframe>

</div></body>

</html>

DEMO: see URL TO CODE

4) URL TO CODE:
http://mesdomaines.nu/eendracht/prin...om_parent.html

**jscheuer1** · 03-18-2012, 08:17 PM

Seems to work OK in Firefox, Chrome, Safari and IE except that I get the:

This is a printer friendly version of the page. Click PRINT to print it. Click
CLOSE to close this window without printing.

header as well. I'm pretty sure a print stylesheet could get rid of that.

But in Opera it prints the entire page:

http://home.comcast.net/~jscheuer1/s...m%20Parent.pdf

I think I had some code on this awhile back that also worked in Opera, I'll see if I can find it.

And it just now occurs to me that a print stylesheet should be able to accomplish this all on it's own. Just set all children of the body except the iframe to display: none; and make sure the iframe is a direct descendant of the body. Or, if that's not feasible, make a chain to it that is displayed, making individual elements along the way display: none if they aren't the iframe's parent. That could be determined with or without javascript for most situations as long as there weren't any bare text nodes in the chain that leads to the iframe. Then, if using javascript, it could write the print stylesheet for you.

Another interesting thing with your current code is that the name of the file being printed in Opera and Chrome is the name of the top page, while in the others it's 'about_blank', presumably because the src of the iframe is about:blank. This has no correlation with whether or not it works in a given browser and is only apparent because my print function is set to include the page name in the header.

**molendijk** · 03-18-2012, 10:04 PM

Thanks for your comment, John.
This:

This is a printer friendly version of the page. Click PRINT to print it. Click
CLOSE to close this window without printing.

can be easily removed. We just have to replace:

Code:

var header_friendly='<div style="position: relative; text-align: center; border-bottom: 2px solid black; font-family: verdana; font-size: 11px; padding: 5px; padding-top: 1px; color: darkred">This is a printer friendly version of the page. Click <button style="cursor: pointer" onclick="window.print(); parent.document.getElementById(\'ifr_friendly\').style.left=\'-10000px\'">PRINT</button> to print it. Click <button style="cursor: pointer" onclick="parent.document.getElementById(\'ifr_friendly\').style.left=\'-10000px\'">CLOSE</button>  to close this window without printing.<\/div>'

with:

Code:

var header_friendly='<div id="printmessage" style="position: relative; text-align: center; border-bottom: 2px solid black; font-family: verdana; font-size: 11px; padding: 5px; padding-top: 1px; color: darkred">This is a printer friendly version of the page. Click <button style="cursor: pointer" onclick="document.getElementById(\'printmessage\').style.display=\'none\';window.print(); parent.document.getElementById(\'ifr_friendly\').style.left=\'-10000px\'">PRINT</button> to print it. Click <button style="cursor: pointer" onclick="parent.document.getElementById(\'ifr_friendly\').style.left=\'-10000px\'">CLOSE</button>  to close this window without printing.<\/div>'

see http://mesdomaines.nu/eendracht/prin...om_parent.html

As for the Opera-problem, I cannot find a solution yet for it. I'll try to find one.

I already tried your suggestion regarding the display-style for the body-children. It worked in non-IE, but not in IE. This browser only printed the visible part of the iframe.

As for the name of the file being printed, I don't find it a big problem, although having one and the same name in all browser would be fine.
===
Arie.

**jscheuer1** · 03-18-2012, 10:31 PM

I looked and I found my Opera solution. It was to use a stylesheet. I don't know if it would work any better than IE as for the visible part. When I get a chance, I'll play around and see. But I had already been thinking about it since my previous post. If the page in the iframe and/or the iframe itself is overflow-y: visible; That might help in IE and in Opera (if it's even an issue in Opera).

One could always just use one method for Opera, another for the rest.

Now, I haven't looked at your code, but I imagine you're using document.write to an about:blank page in an iframe.

In my system, all except Opera did just fine with focusing on the iframe as a frame element of the top page's window.frames collection and then doing a print on that frame:

Code:

var f = window.frames[frameName];
f.focus();
f.print();

Opera was good with that too, except what it printed was the entire top page.

**molendijk** · 03-19-2012, 11:26 AM

John, I tried overflow-y: visible and focus: no luck in IE(7). So what I have now is a solution that works for all browsers except that Opera prints the whole page. That's not a big problem if Opera prints it all, not just what is visible in the viewport. (I cannot test Opera here).

I use innerHTML for the about:blank page page. I tried to have its content printed using onload="window.print()" in the iframe loading the about:blank page (instead of onclick="window.print()"), but no luck in IE7.

I'm happy with the result so far, at least, if Opera prints it all.
===
Arie.

Thread: Printing an iframe from outside

Thread Tools

Search Thread

Printing an iframe from outside

Bookmarks

Bookmarks

Posting Permissions