...

View Full Version : Window.print Prints Incorrect Content in Google Chrome



gr8dane
01-19-2012, 02:27 AM
I'm having trouble getting Google Chrome to print the correct content when I change the content of a modal page with JavaScript. This is my code:

JavaScript:

function printCoupon(couponID)
{
var originalContents = document.body.innerHTML;
var printable = document.getElementById(couponID);
var printContents = printable.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;
document.getElementById(couponID).scrollIntoView(true);
}

HTML:

<body>
<div id="coupon1"><p>Coupon 1 contents</p></div>
<div><a href="javascript:void(0)" onclick="printCoupon('coupon1');return false;">Print Coupon</a></div>
<div id="coupon2"><p>Coupon 2 contents</p></div>
<div><a href="javascript:void(0)" onclick="printCoupon('coupon2');return false;">Print Coupon</a></div>
</body>

This works in IE8 and FF 3.6, but Chrome 16 prints the original content, not the printable content.

UPDATE: I just discovered another problem with this script. In IE9, the parent page is printed along with the modal (the modal looks transparent), instead of just the modal.

felgall
01-19-2012, 03:41 AM
You might have better success if you leave the HTML alone and just hide the parts of the page you don't want printed via the stylesheet.

gr8dane
01-20-2012, 12:46 AM
Thanks for the suggestion, felgall, but that would have been too complicated to implement.

The solution I found was to split the script into three scripts (before, during and after print) and use setTimeout on the second two. It (somehow) took care of both my problems.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum