Javascript Print iframe contents only

Question

This is my code   lt script gt  var body    dddddd      var script     lt script gt window print    lt  scr   ipt gt     var newWin       printf   0  contentWindow document   newWin open    newWin close        body  newWin  append body script     lt  script gt   lt iframe id  printf  gt  lt  iframe gt    This works but it prints the parent page  how do I get it to print just the iframe

User · Answer

document getElementById  printf   contentWindow print      Same origin policy applies

User · Answer

You can use this command   document getElementById  iframeid   contentWindow print      This command basically is the same as window print    but as the window we would like to print is in the iframe  we first need to obtain an instance of that window as a javascript object   So  in reference to that iframe  we first obtain the iframe by using it s id  and then it s contentWindow returns a window DOM  object  So  we are able to directly use the window print   function on this object

User · Answer

I had issues with all of the above solutions in IE8  have found a decent workaround that is tested in IE 8 9  Chrome  Safari and Firefox  For my situation i needed to print a report that was generated dynamically      create content of iframe var content     lt html xmlns  http   www w3 org 1999 xhtml  lang  en  xml lang  en  gt      lt head gt  lt link href   css print css  media  all  rel  stylesheet  type  text css  gt  lt  head gt      lt body gt  rest of body content      lt script type  text javascript  gt function printPage     window focus    window print   return    lt  script gt      lt  body gt  lt  html gt      Note the printPage   javascript method before the body close tag   Next create the iframe and append it to the parent body so its contentWindow is available   var newIframe   document createElement  iframe    newIframe width    0   newIframe height    0   newIframe src    about blank   document body appendChild newIframe     Next set the content   newIframe contentWindow contents   content  newIframe src    javascript window  contents       Here we are setting the dynamic content variable to the iframe s window object then invoking it via the javascript  scheme   Finally to print  focus the iframe and call the javascript printPage   function within the iframe content   newIframe focus    setTimeout function       newIframe contentWindow printPage       200   return    The setTimeout is not necessarily needed  however if you re loading large amounts of content i found Chrome occasionally failed to print without it so this step is recommended  The alternative is to wrap  newIframe contentWindow printPage     in a try catch and place the setTimeout wrapped version in the catch block   Hope this helps someone as i spent a lot of time finding a solution that worked well across multiple browsers  Thanks to SpareCycles   EDIT   Instead of using setTimeout to call the printPage function use the following   newIframe onload   function         newIframe contentWindow printPage

User · Answer

an alternate option  which may or may not be suitable  but cleaner if it is   If you always want to just print the iframe from the page  you can have a separate   media print    stylesheet that hides everything besides the iframe  Then you can just print the page normally

User · Answer

If you are setting the contents of IFrame using javascript document write   then you must close the document by newWin document close    otherwise the following code will not work and print will print the contents of whole page instead of only the IFrame contents   var frm   document getElementById id  contentWindow  frm focus      focus on contentWindow is needed on some ie versions frm print

User · Answer

I was stuck trying to implement this in typescript  all of the above would not work  I had to first cast the element in order for typescript to have access to the contentWindow   let iframe   document getElementById  frameId   as HTMLIFrameElement  iframe contentWindow print

User · Answer

I am wondering what s your purpose of doing the iframe print   I met a similar problem a moment ago  use chrome s print preview to generate a PDF file of a iframe   Finally I solved my problem with a trick    x000D   x000D      print   click function     x000D          noniframe   hide       hide other elements x000D      window print               now  only the iframe left x000D          noniframe   show       show other elements again  x000D      x000D   x000D   x000D

User · Answer

I would not expect that to work  try instead  window frames  printf   focus    window frames  printf   print      and use    lt iframe id  printf  name  printf  gt  lt  iframe gt    Alternatively try good old   var newWin   window frames  printf    newWin document write   lt body onload  window print    gt dddd lt  body gt     newWin document close      if jQuery cannot hack it  Live Demo

User · Answer

Use this code for IE9 and above   window frames  printf   focus    window frames  printf   print      For IE8   window frames 0  focus    window frames 0  print

User · Answer

Easy way  tested on ie7   firefox  Chrome safari   would be this     id is the  id of the iframe function printFrame id                var frm   document getElementById id  contentWindow              frm focus      focus on contentWindow is needed on some ie versions             frm print                return false

User · Answer

At this time  there is no need for the script tag inside the iframe  This works for me  tested in Chrome  Firefox  IE11 and node-webkit 0 12     lt script gt  window onload   function         var body    dddddd       var newWin   document getElementById  printf   contentWindow      newWin document write body       newWin document close      important      newWin focus      IE fix     newWin print       lt  script gt    lt iframe id  printf  gt  lt  iframe gt    Thanks to all answers  save my day

[javascript] Javascript Print iframe contents only

Examples related to javascript

Examples related to jquery

Examples related to printing