An <iframe> Coding Crash Course
Now that you understand why iframes are important and when they should be used, let's cover the coding basics. This is the most basic example:
<iframe src="path_to_other_page.html" width="500" height="300"></iframe>
Obviously, the
src attribute specifies where the content should come from and the width and height values specify the size of the iframe. Here are the other important attributes with which you should be familiar:| Attribute | Description |
|---|---|
name | As described above, this attribute can be used in conjunction with the target attribute of a link to change the iframe's src |
scrolling | Can be scrolling="yes" or scrolling="no" . Specifies if a scrollbar should be shown for the content in the frame. Note that using CSS is actually the preferred method for controlling scrolling, but we still use the scrollingattribute to ensure compatibility with older browsers. |
frameborder | This controls whether there is a border on the frame (frameborder="1") or not (frameborder="0"). As withscrolling, this property really should be controlled via CSS, but we have to stick with frameborder for browser compatibility. By setting frameborder="0", the iframe becomes much less noticeable and the content appears to be part of the main page. |
allowtransparency | If you want the background of your main page to be visible behind the iframe, you need to enable transparency by adding allowtransparency="true" . |
Using these attributes, here's an iframe that no one would know is an iframe:
<iframe src="http://www.mit.edu/" width="600" height="300" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
For the breadth of its possibilities, it's fortunately an easy tag to learn.
