Print Preview doesn't match printed document in IE 8 & 9

MForrest · 07 Dec 2011

I'm helping to develop a web application that uses iframes. On the main page (outside of all frames), we have a div that we use to display and print forms. We also have 2 nested iframes; the innermost iframe contains the main page content. When printing, we use extensive CSS and Javascript (contained in the outermost window) to hide everything except the print div.

When I use File > Print Preview, it always displays the correct preview; that is, the outermost window which contains the print div. Printing from the Print Preview works as it should. However, when I use File > Print, it seems to print whatever window has focus, not the entire page (outermost window). Therefore my print div doesn't get printed and all I get is a printout of whatever is currently onscreen. Why doesn't the print out from File > Print match what is shown in the print preview?

A related issue occurs when using JavaScript's window.print(). When I call window.print from within the print div, it prints as it should. But when I call parent.parent.window.print() from within the double-nested iframe, IE still only prints the window that has focus, not the outermost window (as shown by "parent.parent."). And since they just clicked on a button in the innermost frame, the innermost frame has focus, my print div doesn't print and all I get is a printout of whatever is currently onscreen. I have been using "parent.parent" for all other Javascript calls from the nested iframe to the outermost, so I know that's not the problem.

My temporary solution is to focus on the outermost frame when the users mouses out of the nested window (ie, when they mouse up to the file menu)

Code:

window.onmouseout = parent.parent.window.focus();

and focus on the outermost frame when the user clicks the print button that is within the nested frame. I would really rather not do this focusing, especially on mouseout, because it seems to cause some issues when the user pulls up another application.

I have also tried using the onbeforeprint event to focus. The onbeforeprint was triggered, but I couldn't get the focusing to work correctly.

I haven't been able to find anything regarding these problems online; has anybody had similar problems? I would really appreciate any advice. Thanks!

Neutron16 · 07 Dec 2011

Have you checked out how other people deal with printing on web?
Take Gmail, for example. When you click on Print link they open a new tab with desired content, which shows print window immediately on opening.

Code:

<html> 
<head> 
bla-bla-bla 
<script> 
function Print(){document.body.offsetHeight;window.print()}; 
</script> </head> 
<body onload="Print()"> ...

or for a new tab other companies do more direct

Code:

<body onload="window.print()">