Printing a hidden iFrame in IE

javascript internet-explorer iframe printing cross-browser

15,990

Solution 1

Solution: In IE, an iframe with visibility: hidden; causes the browser to print the parent. Changing the styles to height:0px; width: 0px; fixes this issue.

Solution 2

Parent Document:

<!doctype html>
<html>
    <head>
        <script> 
        function printIframe(iframe_id) { 

            if (navigator.appName.toUpperCase() == 'MICROSOFT INTERNET EXPLORER') { 
                document.frames[iframe_id].focus(); 
                document.frames[iframe_id].print(); 
            } else { 
                window.frames[iframe_id].focus(); 
                window.frames[iframe_id].print(); 
            } 
        } 
        </script> 
    </head>
    <body>
        <a href="javascript:printIframe('printMe');">Print the iframe.</a> 
        <iframe id="printMe" src="iframe.html"></iframe>
    </body>
</html>

iframe document:

<!doctype html>
<html>
    <head></head>
    <body>
        <p>Print this.</p>
    </body>
</html>

From the below link: http://www.eggheadcafe.com/PrintSearchContent.asp?LINKID=449

15,990

Author by

Jack

Solutiions Architect @ Marin Software

Updated on July 29, 2022

Comments

Jack over 1 year
This solution works fine in Firefox 3.0+, but IE8/7 is just printing the entire page, not the specific iframe.

This is the function that gets called when the print link is clicked:
```
var printfunc= function(){
  var url = http://someurl.aspx;
  //This iFrame has style="visibility: hidden; position: absolute; left: -9000px;"
  var printIFrame = GetObj('PrintIFrame');
  printIFrame.src = url;
}
```
The aspx that gets loaded into the hidden iframe calls the print function on the onload event handler:
```
<body onload="PrintJS.Print();">
```
The Print function:
```
 this.Print = function(){
      self.focus();
      self.print();
      return false;
 }
```
I've also tried this with "window" instead of "self". Both solutions work fine in FF but IE doesn't seem to get the scoping right. Any thoughts? A cross-browser solution would be great! Also, I'd rather use CSS print styles, but the content that I'm printing is different than that on the page, hence the need to load html into a hidden iframe.
Debiprasad almost 11 years

What if we will use display: none; instead of visibility: hidden;? In this case we don't need to set the height and width.
Codebeat over 10 years

Spoofing is not so 2013
gattsbr over 10 years

I have the same issue with display:none; however if I set the height and width to 0, and then toggle the display, do the .focus() followed by the .print() then toggle the display again, it works fine.
Thomas almost 10 years

Can you include the main ideas of the answer here? Link only answers are discouraged.