Question

I’m using code from this answer to print a separate page directly from a print button. The user clicks the print button and a url is sent to the print function. The print function loads the separate page into a display:none iframe and prints that iframe onLoad. It works in IE, Chrome but not firefox. In firefox it loads the page into the div but never prints or opens the print dialog. It turns out firefox will not print an iframe if it is set to display:none as below:

<div id="printerDiv" style="display:none"></div>

Is this expected behavior? All other browsers print, I’m thinking of posting on Bugzilla. I tried some css "tricks" to make the div not display where the user can see it, but it’s always visible in some way. I’m currently using the below CSS to make the iframe invisible:

#printerDiv iframe{
width:1px !important;
height:1px !important;
border:0 !important;
margin:0 !important;
}

But it’s margins still exist and leave a 14px gap once the iframe is generated.
Is there some way to make the iframe not be visible at all without the display:none attribute? Better yet, is there some way to do this without a hack like that?

I even tried using CSS to set the iframe to display:block @print media types and display:none for screen, the JS function still won’t print.

Answer 1

If you absolutely position your iFrame off the page, it will still be printable while not being visible to the user.

#printerDiv iframe{
  position: absolute;
  top: -1000px;
}