Stampa solo un iFrame

Question

Sto lavorando a un sistema di risoluzione dei casi e attualmente sto utilizzando una colorbox jQuery per visualizzare un elenco di attività aperte per l'utente. Gli utenti vogliono essere in grado di stampare questo elenco, e suppongo che tu possa farlo all'interno della pagina stessa aggiungendo un link JavaScript che inneschi window.print dall'iframe. Tuttavia, devo anche considerare gli utenti che possono selezionare la stampa dal menu del browser. In tal caso, se la colorbox è aperta, voglio solo stampare il suo contenuto e non la pagina sovrastante.

È possibile nascondere tutto tranne il contenuto iframe utilizzando un file CSS di supporti di stampa? Se è così, come può essere raggiunto? In caso contrario, dovrò ricorrere a JavaScript, quindi sarebbe possibile ottenere l'effetto in JavaScript?

Answer 1

Questo potrebbe funzionare se l'iframe è un figlio diretto del corpo

<style type="text/css" media="print"> 
    body *{display:none} 
    iframe{display:block} 
</style> 

Answer 2

Nel caso in cui la soluzione CSS puro fallirà (non ha funzionato per me, ma forse ho appena perso qualcosa) si può avere soluzione combinata di CSS e JavaScript. In primo luogo avere questo:

<style type="text/css" media="print"> 
    .hideonprint { display:none; } 
</style> 

Poi farà sì che tale JavaScript tutti i contenuti per essere nascosto durante la stampa, tranne che per il telaio:

<script type="text/javascript"> 
window.onbeforeprint = function WindowPrint(evt) { 
    for (var i = 0; i < document.body.childNodes.length; i++) { 
     var curNode = document.body.childNodes[i]; 
     if (typeof curNode.className != "undefined") { 
      var curClassName = curNode.className || ""; 
      if (curClassName.indexOf("hideonprint") < 0) { 
       var newClassName = ""; 
       if (curClassName.length > 0) 
        newClassName += curClassName + " "; 
       newClassName += "hideonprint"; 
       curNode.setAttribute("original_class", curClassName); 
       curNode.className = newClassName; 
      } 
     } 
    } 
    document.getElementById("myframe").className = document.getElementById("myframe").getAttribute("original_class"); 
} 
</script> 

Questo anche assumere l'iframe è figlio diretto del corpo altrimenti ha vinto' anche lavorare.

Answer 3

Ho trovato un metodo che funziona per stampare solo il contenuto dell'IFrame anche se il client utilizza la voce del menu di stampa del browser, ma non potrei dirvi perché lo è. Il trucco è di mettere a fuoco l'IFrame prima di stampare. Anche il foglio di stile di stampa è necessario, anche se il javascript sembra essere ciò che accade quando l'utente stampa dal menu. Hai bisogno di entrambe le parti per farlo funzionare. Stampa l'intero documento, anche se è più grande dell'IFrame! L'ho testato con successo in IE8, Firefox 5 e 6 e Safari 3.2.

Io uso questo script come un gestore per un evento onclick per un pulsante o "mi stampare" link:

<script type="text/javascript" language=JavaScript> 
    function CheckIsIE() 
    { 
     if (navigator.appName.toUpperCase() == 'MICROSOFT INTERNET EXPLORER') 
      { return true; } 
     else 
      { return false; } 
    } 
    function PrintThisPage() 
    { 
     if (CheckIsIE() == true) 
     { 
      document.content.focus(); 
      document.content.print(); 
     } 
     else 
     { 
      window.frames['content'].focus(); 
      window.frames['content'].print(); 
     } 
    } 
</script> 

L'IFrame in questione si chiama e ha identificato il contenuto. Il mio pulsante è in un div chiamato print_iframe Lo sniffing del browser è essenziale! Poi ho utilizzare un foglio di stile di stampa solo collegato in questo modo:

<link href="/styles/print.css" rel="stylesheet" type="text/css" media="print" /> 

@charset "utf-8"; 
/* CSS Document */ 
body { background:none; } 
#left { display:none; } 
#main img { display:none; } 
#banner 
{ 
display:none; 
margin-top:0px; 
padding:0px; 
} 
#main 
{ 
margin-top:0px; 
padding:0px; 
} 
#print_iframe 
{ 
display:none; 
} 

Answer 4

// suppose that this is how your iframe look like <iframe id='print-iframe' name='print-frame-name'></iframe> 
// this is how you do it using jquery: 
$("#print-iframe").get(0).contentWindow.print(); 

// and this is how you do it using native javascript: 
document.getElementById("print-iframe").contentWindow.print();