Add JavaScript and HTML to IFRAME, and print IFRAME to printer

Question

There are multiple posts dealing with part of these topics, but none that puts them together.

On a given page, I wish to create a new IFRAME, add some JavaScript to it which will print the page to a printer, and add some HTML to it which will be printed.

Below is my attempt with a live demo at http://jsbin.com/UDUCADI/2/. It prints, but prints the parent page and not the IFRAME.

How do I just print the IFRAME?

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Print IFRAME</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <script type="text/javascript">
            $(function () {
                $('#printIt').click(function(){
                    var iframe   = $('<iframe>');
                    var script   = document.createElement("script");
                    script.type  = "text/javascript";
                    script.text  = "window.print()";
                    iframe[0].appendChild(script);
                    iframe.appendTo('body');
                    var iframeDocument=$(iframe[0].contentWindow.document);
                    iframeDocument.find('body').html($('#stuffToPrint').html());
                })
            });
        </script>
    </head>
    <body>
        <button id="printIt">Print</button>
        <div id="stuffToPrint">
            <p>Print this text!</p>
            <img alt="And print this image" src="dropdown_arrow_blue.gif">
        </div>
        <div>Don't print this!</div>
    </body>
</html>

Hide everything else with a print-only stylesheet? – Blazemonger Jan 09 '14 at 17:25 — Blazemonger, Jan 09 '14 at 17:25

Kerstomaat · Accepted Answer · 2014-01-09T17:55:40.367

2

EDITED

There are actually a few things wrong. One of it is you're mixing jQuery and the DOM api. Second would be that you add the script tag to the body of the iframe and then set the HTML of the body again, overwriting the script tag. Third: you're using script.text, which should be script.innerHTML.

$(function () {
$('#printIt').click(function(){
    var iframe   = document.createElement('iframe');
    document.body.appendChild(iframe)
    iframe.contentWindow.document.body.innerHTML = $('#stuffToPrint').html();
    var script   = document.createElement("script");
    script.innerHTML  = "window.print()";
    iframe.contentWindow.document.body.appendChild(script);
})
});

Working version at: http://jsbin.com/UDUCADI/5/

edited Jan 09 '14 at 17:55

answered Jan 09 '14 at 17:31

Kerstomaat

673
4
13

I believe this approach is buggy with some browsers. See http://stackoverflow.com/questions/472951/how-do-i-print-an-iframe-from-javascript-in-safari-chrome – user1032531 Jan 09 '14 at 17:33
Tried multiple times, but have not been successful. Not sure what I am doing wrong. Maybe something related to getting the JavaScript into the iframe. – user1032531 Jan 09 '14 at 17:38
maybe you need to run this command once the page inside iframe is loaded..add an onload event handler to the iframe's document and try running Simon's code inside that handler (just use window.print) inside that handler. Updated jsbin as well – Jags Jan 09 '14 at 17:41
I just looked at the iframe DOM in the console and there doesn't seem to be a script tag there. – Kerstomaat Jan 09 '14 at 17:42
Wait now I see your problem: you should use script.innerHTML instead of script.text to set the script contents. – Kerstomaat Jan 09 '14 at 17:43
If I put `alert("Hello")` in the script tag, it alerts even though FireBug doesn't show the script tags. So it must be there? – user1032531 Jan 09 '14 at 17:46
Thanks SimonPlus! It appears to work great. I have to run out for a bit, but when I get back I will further test it and select this as the great answer! – user1032531 Jan 09 '14 at 17:51

Add JavaScript and HTML to IFRAME, and print IFRAME to printer

1 Answers1