Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Window.print Prints Incorrect Content in Google Chrome

    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:
    Code:
    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:
    Code:
    <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.
    Last edited by gr8dane; 01-19-2012 at 02:39 AM. Reason: update info

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •