Create an iframe with these simple tools and references.
iFrame HTML.com
Everything you need to build your own iframes
iFrame HTML is fairly straightforward. Below you will find a synopsis of the basic tags and attributes that you may use in your iframes. You can skip all of this and simply use our iframe generator - which also explains the utility of each of the options. The only thing we left out of our generator is style - if you are working with stylesheets, you probably know that a generator will not be much help there and would only probably further confuse you!
iFrame HTML Reference Guide
Reference Guide for basic HTML tags for iframes.
iframe Browser Support
The <iframe> tag is supported in all major browsers.
Differences Between HTML and XHTML
The iframe element is not supported in HTML 4.1 Strict DTD and in XHTML 1.0 Strict DTD.
Optional Attributes
KEY: Doctype: S=Strict, T=Transitional, and F=Frameset.
| Attribute | Value | Description & use | Doctype |
|---|---|---|---|
| frameborder | 1 0 |
0 = no border around the frame, 1= border. frameborder="0" |
TF |
| height | pixels % |
Specifies the height of the iframe height="100" or height="100%" |
TF |
| longdesc | URL | links to a page that contains a long description of the content of an iframe | TF |
| marginheight | pixels | Specifies the top and bottom margins of an iframe | TF |
| marginwidth | pixels | Specifies the left and right margins of an iframe | TF |
| name | name | Specifies the name of an iframe - useful for navigation and dynamic loading | TF |
| scrolling | yes no auto |
Specifies whether or not to display scrollbars in an iframe | TF |
| src | URL | Specifies the URL of the document to show in an iframe | TF |
| width | pixels % |
Specifies the width of an iframe | TF |
Attributes
The <iframe> tag supports the following attributes:
| Attribute | Value | Description | Doctype |
|---|---|---|---|
| class | classname | Specifies a classname for an element | STF |
| id | id | Specifies a unique id for an element | STF |
| style | style_definition | Specifies an inline style for an element | STF |
| title | text | Specifies extra information about an element | STF |
Bare minimum iframe code:
- Opening tag
- iframe page source
- height of the iframe
- width of the iframe
- Non-iframe content (What to display in the users' browser if they are not capable of viewing iframes.)
- Closing tag
Sample iFrame HTML
Below is a demonstration of two iframes. One with frameborders, and the other without. You can dynamically load different content by clicking on the two links below each frame. Page-2 is with a colored background so that you can easily see the boundaries of the iframe in the borderless example.
To direct a link to open inside of an iframe, the code is simple. You merely name the iframe, and then set the link as shown below. We have named our iframe "test". We then set the link to open in target="test".
Iframe with frameborders
Code:Output:
page-1 | page-2 <--You can navigate by clicking on these links.
Iframe without frameborders
Code:Output:
page-1 | page-2
View just the code for these iframes and the navigation.
>>>Close this section...
Can I use the "Align" attribute.
The "align" attribute is being deprecated by the folks at W3C - the official standards organization for the World Wide Web.
Can I embed an iframe within an iframe?
Yes. You can use an iframe to contain sub-iframes. There are some translation pages which use this. Here is an example:
They use nested iframes.
How can I load another page at say, the halfway mark?
Yes, if it is on your domain and you have access to the code. Simply insert an anchor tag and direct the iframe to open there.
See our example on our samples page.
What is a "UFrame"?
A uframe is a project written by a progammer named Omar Al Zabir.
According to the codeplex site, UFrame combines the goodness of UpdatePanel and IFRAME in a cross browser and cross platform solution. It allows a DIV to behave like an IFRAME; loading content from any type of page: static or dynamic.
It can load pages having both inline and external Javascript and CSS, just like an IFRAME. But unlike an IFRAME, it loads the content within the main document and you can put any number of UFrames on your page without slowing down the browser.
Uframe supports ASP.NET postback and you can have DataGrid or any other complex ASP.NET control within a UFrame. UFrame works perfectly with ASP.NET MVC making it an replacement for UpdatePanel.
UFrame is 100% Javascript making it a cross platform solution.
You can use UFrames with:
HTML