How to Create an iFrame for Printing

Javascript allows you to print iFrames within your HTML code

iFrames are useful for inserting an external HTML page into your Web page. To do this, you must use the iFrame tag in your HTML code, which indicates what file to place inside your iFrame. To properly display iFrames in such a way that they can be printed, there is a little bit of extra JavaScript needed so that a Web browser knows to include an iFrame in its print.

Instructions

1. Open a text editor, such as Notepad or Text Edit. Select "File" from the top menu, then "New." If you already have an HTML file created, then open this in your text editor instead.

2. Locate the part of the document where you want to insert your iFrame and enter the code:

   <iframe src="yourpage.html" width="300" height="300">

   <p>Your browser does not support iframes.</p>

   </iframe>

   This will create a 300 pixels x 300 pixels box which inserts "yourpage.html" into the Web page. Make sure to replace "yourpage.html" with the page you would like to insert into your iFrame. You may also change the width and height if you need. The HTML page you use should be located in the same directory as the Web page into which you are inserting it.

3. Insert the JavaScript before your iFrame, in the header of your Web page.

   <script language=JavaScript>

   reportFrame.focus();

   setTimeout('reportFrame.print()',20);

   </script>

   This will ensure that your browser recognizes your iFrame when it prints.

4. To put a "Print This Page" link in your HTML documen, scroll down to the bottom of your Web page and insert:

   <a href="javascript:PrintThisPage();" >Print This Page</a>

   This will automatically bring up the print window for visitors to your site.

5. Save your document with the extension .html. Upload the page and the iFrame it is using to the same directory on your Web server.

References

• W3 Schools: HTML iFrame Tag
• PBDR.com: Javascript Printing Client Side Reports Using IFrames