Iframes - Basic Information
The following demonstrates an iframe with some fairly typical attribute settings.
<iframe id="ifrm" name="ifrm" src="basics_demo.html" scrolling="auto" width="80%" height="160" frameborder="1"> [Content for browsers that don't support iframes goes here.] </iframe>
This is how it displays:
The frameborder attribute is set to 1 for this example so that you can easily distinguish the location of the iframe. It can be set to 0 so the iframe content will be seamlessly integrated into your page.
Other Iframe Attributes
The iframe's src attribute specifies the URL of the document to be displayed in the iframe. The scrolling attribute can be set to 0, 1 or auto. With scrolling set to auto iframe scrollbars will appear if content of the document in the iframe exceeds its visible area.
Notice that the example includes both the id and name attributes with the same value assigned to each. This is recommended for best cross-browser support when scripting the iframe element.
Styles for the Iframe and its Content
Although we demonstrate the iframe's height and width attributes in this example, using styles (CSS) to specify height and width is the recommended approach. You can also use CSS to specify the border for the iframe.
The document loaded into the iframe does not inherit styles such as font, colors or background from the containing document. Styles to be applied to iframe content need to be included in that document in the usual ways, i.e., linked, embedded, imported, etc.
Example Source Code
You can use your browser's menu commands to view the source code of this document. You can right-click on an iframe to access the source code of the document contained inside it. This tutorial's examples are available for download in a zipped file.
More Information
See an example demonstrating loading new documents into the iframe.
See W3 Schools - the iframe tag for a table describing all the iframe attributes and their possible values.
Back to Iframes Tutorial.