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 src attribute specifies the document to be displayed in the iframe. The scrolling attribute can be set to 0, 1 or auto. With scrolling set to auto 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.
Although we demonstrate the height and width attributes in this example, using styles to specify height and width is the recommended approach.
The document loaded into the iframe does not inherit styles 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.
You can use your browser's menu commands to view source code and save the example documents. You can right-click on an iframe to access the source code of the document contained inside it.
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.