Target iFrame with Print function

Discussion in 'JavaScript' started by mark_s, Oct 5, 2007.

  1. #1
    Would someone be kind enough to give me a javascript function that means when the user prints the website using the browser button, it only targets a specific iFrame id?

    I first thought you would need a print button but someone told me it can be done so it works when the person uses the browser button.
     
    mark_s, Oct 5, 2007 IP
  2. ezpz

    ezpz Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You could try marking all the iFrames as non-printable with CSS:

    @media print {
    iframe.noprint { DISPLAY:none }
    }

    <iframe id="..." class="noprint" ...>

    Then dynamically change the class of the iframe you want to print:

    document.getElementById(printId).className="print";

    // and if you want to make the last printable thing non-printable
    document.getElementById(lastPrintId).className="noprint";

    // remember lastPrintId for next time
    lastPrintId=printId;
     
    ezpz, Oct 6, 2007 IP
  3. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you for your suggestion and I'll certainly have to use it if that is the only way.

    Does anyone have any ideas that are more simple to implement?
     
    mark_s, Oct 6, 2007 IP
  4. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ezpc, how do I make it so everything by default doesn't print but then I can choose to only have a specific iframe print?
     
    mark_s, Oct 9, 2007 IP
  5. ezpz

    ezpz Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I've never tried turning everything off, but this might work:

    @media print {
    { DISPLAY:none }
    iframe.print { DISPLAY:block }
    }

    However, it might depend what elements your iframe is in - i.e. you might need some of the elements containing the iframe to also have DISPLAY set to block rather than none.
     
    ezpz, Oct 9, 2007 IP
  6. ezpz

    ezpz Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    And here's something that actually works...

    
    <html>
     <head>
      <title>Test of just printing one iframe</title>
      <style>
       @media print {
        iframe, p, table {DISPLAY:none;}
        .print {DISPLAY:inline;}
       }
      </style>
     </head>
     <body>
      <p>Some text.</p>
      <iframe src="http://www.google.com"></iframe>
      <br/><br/>
      <table><tr><td>A table</td></tr></table>
      <br/>
      <iframe class="print" src="http://www.sectorprime.com"></iframe>
     </body>
    </html>
    
    Code (markup):
    I'm afraid you have to put each element class that appears on your web page in the stylesheet with DISPLAY:none, but otherwise it's fine. You can apply the "print" class to any element.
     
    ezpz, Oct 9, 2007 IP
  7. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks a lot!!
     
    mark_s, Oct 10, 2007 IP