print only iframe content

Squadless
Squadless used Ask the Experts™
on
I've the page where i have an iframe showing the main content along with the navigaiton in the document. when users print the page using control+p i only want to display the iframe content and simply hide the main parent page.

how do i capture ctrl+p in javascript if i can? If not is there any simpler way to accomplish this?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
//try using css media selectors to determine what gets displayed and what gets printed:

@media screen {
    iframe { display: none; }
}

@media print {    
    iframe { border: solid 2px red; }
}

Author

Commented:
how about hiding the body but only showing iframe? cos if i hide body it's also hiding the iframe too
I looked into your problem and discovered the same issue with the CSS only fix and assumed you had discovered the problem with just the CSS change.

However, in IE at least there is a JS alternative: onbeforeprint()   javascript event.

Using the onbeforeprint() event, you can tell the page to copy your element with jquery's method:clone() and then use .prepend() to add the iframe element back to the top of the document body.

The other change needed for your page is that you will need to wrap all of the current page body code into a named div so when you collapse it using for print, you will still be able to see your iframe content.

Below, is a code work up of the concept I am proposing.

<head>
     <style>
          @media print {    
                    div#screenonly  { display:none; }
          }
     </style>

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 

      <script language="javascript" >
              showPrintElements() {
                     Alert('printing now!'); //you can remove this once it works for you.
                     $('#includeinprint').clone().prependTo('body'); //move the iframe code in the dom.
              }

              	function restoreScreenElements(){
	        //Reload the window
	       setTimeout("reloadIfDone()",2000);
	}
	
	function reloadIfDone() {
	      var answer = confirm("If you are done printing, click yes to reload the page.")
	      if (answer) window.location.reload(); //reloads the page and restores the original page.
	}

              window.onbeforeprint = showPrintElements;
              window.onafterprint = restoreScreenElements;
      </script>
</head>

<body>
     <div id="screenonly">[your current page code]
          <iframe id="includeinprint"></frame>
     </div>
</body>

Open in new window


I have not tested the above code but, this gives you a good idea of the organization I had in mind to accomplish your goal.

 It got late so I figured I would see if anyone posted a better way before I added this information because it browser dependant.

This only part of the answer because it is browser dependent but, it will get you off the ground. However, if you only really need it to work in IE, there you go...

Hopefully, others will add the way to detect the print event in FF, Chrome and Opera through using CSS changes to trigger a JS event. Whenever I have a chance I will try to stop back and complete the fix if it is not already finished by then.


**A Final Note: Another solution would be to pull your iframe out of the rest of your page code and use absolute positioning to place it on the page where you want it located in your content. You can then, use CSS to change the position of the iframe and hide the rest of your page.

<style>
          @media print {    
                    div#screenonly  { 
                           display:none;
                     }

                    iframe#includeinprint { 
                            position:static; 
                            left:0; 
                            top:0;  
                    }
          }

          @media screen {    
                    div#screenonly  { 
                           display:block; 
                   }

                    iframe#includeinprint 
                    { 
                           position:absolute; 
                           left:[x]; 
                           top:[y]; 
                    }
          }

</style>

Open in new window


If you place your iframe outside of your screen only content, I believe this will also accomplish your goal.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial