Create an iframe with these simple tools and references.
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!
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.
KEY: Doctype: S=Strict, T=Transitional, and F=Frameset.
|Attribute||Value||Description & use||Doctype|
|0 = no border around the frame, 1= border.
|Specifies the height of the iframe
height="100" or height="100%"
|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|
|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|
|Specifies the width of an iframe||TF|
The <iframe> tag supports the following attributes:
|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 framebordersCode:
page-1 | page-2 <--You can navigate by clicking on these links.
Iframe without framebordersCode:
page-1 | page-2
>>>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.
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.
You can use UFrames with:
HTML ASP .NET PHP JSP any other platform.