Trouble Printing iFrames

Question

[Simplified version of this question:]

Why do iFrames sometimes refuse to print? For example, hit print preview on these two pages:

1. http://fiddle.jshell.net/gJDv4/1/show/
2. http://fiddle.jshell.net/gJDv4/2/show/

On print-preview, the iFrames are visible in the first example, but hidden in the second. The ONLY code difference between first and second iFrames is a CSS property (margin: 20px;) has been added to the iFrames in the second example.

---

[Long (original) version:]

I am building a preview/print page that assembles a bunch of independent HTML files referencing their own style-sheets and javascript files.

• http://jsfiddle.net/GJKkm/16/

The idea is that all files are displayed in iFrames for preview, and then when printed, each iFrame (which likely will span multiple pages) prints out as if it were it's own document.

However, when I print (or print-preview) the iFrames either show no content, or they only print the first page, truncating the remaining pages of the iFrame.

• http://fiddle.jshell.net/GJKkm/16/show/ (use this link to print-preview, not the one above)

The iFrames printed (and print-previewed) just fine before I made them multiple pages:

• http://fiddle.jshell.net/GJKkm/7/show/

What is the reason for this behavior?

Answer 1

You can print the documents in the individual iframes by calling the print() function on their windows....

So something like this to print file 2:

$('#iframeTwo')[0].contentWindow.print()

And here a jsfiddle where I added buttons which trigger the individual prints...

http://jsfiddle.net/sg3s/GJKkm/17/

As for why the browser doesn't print the content inside iframes when printing their parent document. Probably has to do something with the fact that those documents aren't actually part of the document they're shown in... Think of it like a separate window (one you may generate with window.open() in js) but then skillfully hacked into the main document with the viewport limited to whatever is specified on the iframe with some magic.

Answer 2

I came up with a way to solve it.

The aim is to get the contents of all the iframes into the parent window by manipulating the DOM using javascript.

With this solution you even avoid the problem of the iframe being cut off if it exceeds one page.

Here is the code:

<script>

 pages =[] // initiate an empty list here

function printPage() {

var frames = document.getElementsByTagName('iframe');
// get all the iframes and loop over them
// then push their innerHTML into the list
for (var i = 0; i < frames.length; i++){ 
   pages.push(frames[i].contentWindow.document.body.innerHTML); 
;
}
if (pages && pages.length) {

// this if statement, just checks to ensure our list is not empty before running the code.

// here is the magic, we now set the parent window to be equal to all the concatenated iframes innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
} 
else {
// do nothing
}


}
</script>

With this you get only one print dialogue box to print all the iframes.

Remember that in your parent page HTML you will have the code below to call the printPage function.

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />