Printing just an iFrame

Question

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?

In the end I came to the conclusion that the iframe was more trouble than it was worth. I'm instead using colorbox in div mode and adding some logic to the page being fetched that determines whether it should render an entire HTML page or just the data I'm interested in. Styling the page to print with the div was far less problematic than with the iframe — GordonM, Nov 05 '10 at 12:59
Possible duplicate of [Printing contents of a dynamically created iframe from parent window](http://stackoverflow.com/questions/831147/printing-contents-of-a-dynamically-created-iframe-from-parent-window) — Zach Saucier, Mar 10 '17 at 01:15

Fareed Alnamrouti · Answer 1 · 2016-07-20T04:36:21.757

5

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

edited Jul 20 '16 at 04:36

answered Mar 10 '12 at 16:46

Fareed Alnamrouti

30,771
4
85
76

score 0 · Answer 2 · answered Nov 04 '10 at 12:46

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.

score 0 · Answer 3 · answered Sep 29 '11 at 21:00

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

Dr.Molle · Accepted Answer · 2010-11-04T13:05:21.097

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

edited Nov 04 '10 at 13:05

answered Nov 04 '10 at 12:18

Dr.Molle

116,463
16
195
201

1

From quick test this did not work, the "*" took precedence, I'll put some quick JS that I wrote. – Shadow The GPT Wizard Nov 04 '10 at 12:42
(* iframe) and tweak the width/height of the iframe for maximum result ;) – BGerrissen Nov 04 '10 at 12:42
@ShadowWizard `!important` is always an option. – TWiStErRob Aug 12 '15 at 12:51

Printing just an iFrame

4 Answers4

Linked