SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,686
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Try seeing how things go when you add in a small delay.

    Code javascript:
    setTimeout(window.print, 500);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I do that it doesn't work in any browser. It performs the next command(s) before window.print. Your suggestion was helpful, though, in that it pointed out what was happening in Chrome. Is there a way to set a timeout between window.print and the following command?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,686
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gr8dane View Post
    Is there a way to set a timeout between window.print and the following command?
    Only by placing everything that must follow the print command in a separate piece of code, such as with:

    Code javascript:
    setTimeout(function () {
        window.print();
        ...
    }, 500);

    I'm not in a position to test things right now, but that's the theory.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, paul_wilkins!! The solution was to split the script into three scripts (before, during and after print) and use setTimeout on the second two. It works perfectly, now.


Bookmarks

Posting Permissions

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