Printing just an iFrame

问题:

I'm working on a case resolution system, and am currently using a jquery colorbox to display a list of open tasks to the user. Users want to be able to print this list, and I guess you can do it from within the page itself by adding a JavaScript link that triggers window.print from within the iframe. However, I've also got to account for users possibly selecting print from the browser's menu. In that case, if the colorbox is open, I just want to print its contents and not the overlying page.

Is it possible to hide everything except for the iframed content using a print media CSS file? If so, how can this be achieved? Failing that, I'll need to resort to JavaScript, so would achieving the effect in JavaScript be possible?

回答1:

This could work if the iframe is a direct child of body

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

回答2:

// 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();

回答3:

In case the pure CSS solution will fail (didn't work for me but maybe I just missed something) you can have combined solution of CSS and JavaScript. First have this:

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

Then such JavaScript will cause all content to be hidden when printing, except your frame:

<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>

This also assume the iframe is direct child of the body otherwise it won't work either.

回答4:

I have found a method that works to print just the IFrame's content even if the client uses the browser's print menu item, but I couldn't tell you why that is. The trick is to set the focus to the IFrame before printing. The print stylesheet is needed too, although the javascript seems to be what is happening when the user prints from the menu. You need both parts for it to work. It prints the entire document, even if it is larger than the IFrame! I have successfully tested it in IE8, Firefox 5 and 6 and Safari 3.2.

I use this script as a handler for an onclick event for a button or "print me" 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> 

The IFrame in question is named and id'd content. My button is in a div called print_iframe The browser sniffing is essential! Then I use a print only stylesheet linked in like this:

<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;
}