Firefox non stamperà iframe con il display: nessuno

Question

Sto utilizzando il codice this risposta per stampare una pagina separata direttamente da un pulsante di stampa. L'utente fa clic sul pulsante di stampa e un url viene inviato alla funzione di stampa. La funzione di stampa carica la pagina separata in un iframe display:none e stampa iframe onLoad. Funziona in IE, Chrome ma non Firefox. In firefox carica la pagina nel div ma non stampa mai o apre la finestra di dialogo di stampa. Si scopre Firefox non stamperà un iframe se è impostato a display:none come di seguito:

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

È questo il comportamento previsto? Tutti gli altri browser stampano, sto pensando di pubblicare su Bugzilla. Ho provato alcuni "trucchi" di css per rendere il div non visibile dove l'utente può vederlo, ma è sempre visibile in qualche modo. Attualmente sto usando il seguito CSS per rendere l'iframe invisibile:

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

Ma è ancora esistere e lasciare uno spazio 14px una volta l'iframe viene generato margini. C'è un modo per rendere l'iframe non visibile su tutto senza l'attributo display:none? Meglio ancora, c'è un modo per farlo senza un trucco simile?

Ho anche provato a usare i CSS per impostare l'iframe sui tipi di supporto display:block @print e display:none per lo schermo, la funzione JS continua a non stampare.

Answer 1

Se è assolutamente posiziona l'iFrame fuori dalla pagina, si sarà ancora da stampare, pur non essendo visibile all'utente.

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

Answer 2

Se controlli il contenuto del iframe, renderlo stampa stessa:

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

Answer 3

Ho avuto esattamente lo stesso problema. Quando l'attributo di visualizzazione è impostato su none, Firefox restituisce 0 per $('#printerDiv').css('height'), $('#printerDiv')[0].style.height o quando outerHeight() o outerWidth() vengono richiamati sull'elemento.

Ho usato z-index per questo che non consente di utilizzare position:absolute.

Quindi, si potrebbe avere questo nel file css:

#printerDiv { z-index: -10; } 

Poi, quando si vuole rendere visibile, è sufficiente impostare lo z-index utilizzando un css jquery) chiamata (.