Using IFrames

Embedding webpages using an IFrame

Sample IFrame
Below is an example embedded HTML webpage named "IFrame-SAMPLE.html". This example uses responsive css code to make the IFrame window flex in width.





Follow these 3 steps:
Edit the size and border of the IFrame in the step #2 css code.


1.) Create page to frame
Create a new webpage called "framepage.htm" that will display inside the IFrame window.


2.) Add IFrame embed code
Select and copy the following code. Paste it into the content area of your HTML webpage where you want the IFrame window to appear.

<iframe name="Framename" src="framepage.htm" width="400" height="200" frameborder="0" scrolling="auto" class="frame-area"> </iframe>

3.) Add CSS code
Select, copy, and paste the following css at the bottom of your template global style .css file. The css height and width will overwrite the IFrame HTML code. Edit the following with your height, width, border and overflow options.

The following code works for both responsive and non-responsive webpages.

.frame-area { display: block; width: 100%; /* RESPONSIVE WIDTH */ max-width: 400px; height: 300px; overflow: auto; /* EDIT TO hidden FOR NO SCROLLBAR */ border: #999999 1px solid; margin: 0px; padding: 0px; }

If you do not have a global css file, add the above code to the head section of your webpage just before the </head> tag between the following tags.

<style type="text/css">

/* css code goes here */

</style>


Notes about HTML5 compliance
The IFrame HTML code in step #1 includes backward compatible code for older HTML 4.01 web browsers like IE8. Your HTML error checker may flag these codes as errors.

To use fully compliant HTML5 code remove the following from the HTML code:

frameborder="0" scrolling="auto"


Options
In the above example you can change the width and the height to any sizes you would like for your IFrame (use 100% width for responsive and edit the max-width to a fixed px number). Optionally edit the border color and width.

Edit the scrolling in the HTML to "no" or "yes". Edit the "overflow" in the css code to "visible" or "scroll" or "hidden" or "auto". You can edit the "Framename" with any name you prefer.


Links to change the IFrame
In the HTML page that you are adding the IFrame to, you can add links to change the page inside the IFrame. These links will target the IFrame name (Framename in this example). Here is an example link:

<a href="newpage.htm" target="Framename">Link Name</a>


Links inside the IFramed page
For links you add to the page inside the IFrame you may want to target your links to have them open inside, or outside the IFrame. See target links support. The following is an example link that opens a page outside the IFrame:

<a href="newpage.htm" target="_top">Link Name</a>


Embedding a script, site or application into an IFrame
An IFrame can also be used to integrate a script such as a forum, blog, PDF files, applications such as a calendar or almost anything else you would like to show on an HTML page. To do this simply change the "src=" link in the code used in step #1. For example: instead of the IFrame embedding the "framepage.htm", you can use a full link to your forum or blog. For example "http://your-domain.com/cgi-bin/forum.cgi" would integrate a forum script named "forum.cgi" in the "cgi-bin" folder at your-domain.com.


Sample website in an IFrame page
Below is an example of the Allwebco support website homepage embedded inside an IFrame. This code uses responsive css as outlined above.



Below is the code that embeds the above page using the full http:// path as the IFrame "src=":


<iframe name="Framename" src="https://allwebco-templates.com/support/" width="550" height="550" frameborder="0" scrolling="yes" style="width: 100%;"> </iframe>



Related Topics:
Target links and IFrames
More Scripts