Firefox no imprimirá iframe con la pantalla: none

Question

Estoy usando el código de this para imprimir una página separada directamente desde un botón de impresión. El usuario hace clic en el botón de impresión y se envía una url a la función de impresión. La función de impresión carga la página separada en un iframe display:none e imprime ese iframe onLoad. Funciona en IE, Chrome pero no en Firefox. En firefox carga la página en el div pero nunca imprime o abre el diálogo de impresión. Resulta que Firefox no se imprimirá un iframe si se establece a display:none de la siguiente manera:

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

¿Este comportamiento esperado? Todos los demás navegadores imprimen, estoy pensando en publicar en Bugzilla. Probé algunos "trucos" de CSS para hacer que el div no se muestre donde el usuario puede verlo, pero siempre está visible de alguna manera. Actualmente estoy usando el siguiente CSS para hacer el iframe invisible:

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

pero sigue existiendo márgenes y dejar un espacio 14px una vez que se genera el marco flotante. ¿Hay alguna forma de hacer que el iframe no sea visible en total sin el atributo display:none? Mejor aún, ¿hay alguna forma de hacer esto sin un truco como ese?

Incluso intenté usar CSS para establecer el iframe en display:block @print tipos de medios y display:none para la pantalla, la función JS aún no se imprimirá.

Answer 1

Si coloca absolutamente su marco flotante fuera de la página, todavía habrá imprimible si bien no es visible para el usuario.

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

Answer 2

Si se controla el contenido del iframe, hacer que imprima en sí:

<script type="text/javascript"> 
window.print() 
</script> 

Answer 3

Tuve exactamente el mismo problema. Cuando el atributo de visualización se establece en none, Firefox devuelve 0 para $('#printerDiv').css('height'), $('#printerDiv')[0].style.height o cuando se llama al outerHeight() o outerWidth().

Utilicé z-index para esto que no obliga a usar position:absolute.

Por lo tanto, usted podría tener esto en el archivo css:

#printerDiv { z-index: -10; } 

Entonces, cuando se desea hacerlo visible, acaba de establecer el índice z utilizando un CSS jQuery() llamada.