CODEWITHSUNDEEP
javascriptinternet-explorer-8internet-explorer-7
lancemonotone
lancemonotone

Reputation: 135

IE7 & IE8 javascript print function

I'm having a javascript issue I can't figure out. I've taken a snippet of code that I got here and am using it in this page.

The idea is that users can click the 'Print List' button and the listing is copied to a div within a hidden iframe and printed. The printed page contains the the iframe source HTML with the list inserted properly. However, in IE7 & 8, the printed page is the full parent page, not the iframe. The behavior in IE9, Chrome and FF is correct.

I tried debugging the script but I couldn't see where it was going wrong.

Here's the code that the Print List click triggers: 

function printSection(id) {
  if (document.getElementById('print_frame').contentDocument){
    theIframe = document.getElementById('print_frame').contentDocument;
  }
  else {
    theIframe = document.frames['print_frame'].document;
  }
  var thePrinter = theIframe.getElementById('print_section');
  var theCopy = document.getElementById(id);
  thePrinter.innerHTML = theCopy.innerHTML;
  parent.print_frame.printPage();
}

And here's the printPage() function:

function printPage() {
  window.parent.print_frame.focus();
  window.print();
}

I'd appreciate any help. Please let me know if you need more information. Thanks so much.

Upvotes: 0

Views: 2728

Answers (1)

Sam Greenhalgh
Sam Greenhalgh

Reputation: 6136

A simpler solution might just be to use CSS media types to hide the content of the page and show an otherwise hidden element for print.

CSS

.print{display:none;}
@media print {
    .pagecontainer{display:none;}
    .print{display:block;}
}

HTML

<body>
    <div class="pagecontainer">
        Page content here
    </div>
    <div class="print">Only show this when printing</div>
</body>

Upvotes: 1

Related Questions