Inline Frames
Inline Frames are a great implementation of the frames idea — they allow you to open new pages inside main pages, without the many problems brought about by classic-style frames.
This page was last updated on 2007-05-03
Browser Compatibility Note:
Inline Frames were introduced into the official specifications in HTML 4.01. Before they were offically supported, they had started as an » Internet Explorer-only tag, and have been supported since IE3.0 and above.
Modern browsers such as Firefox, Safari and Opera also support them. Your only real trouble will come from ancient browsers like Netscape 4, which skips over them as though they weren’t there.
The basics
Inline or “floating” frames are ones which appear on a page, much like an image or a table would. This allows you to open completely separate pages in the middle of your pages. Here’s a simple example of an inline frame:
So now, I have two pages being displayed on one page, without the restrictions of the usual frameset stuff. The code for inline frames is very easy, and very similar to the <img> element. To get that page to display, I wrote
<iframe src="../examples/inlineframes1.html" width="80%" height="110"> </iframe>
Very, very easy really. The iframe element sets up some space for the new content, and the src attribute specifies the address of the inlined file. If you wanted to use a page from another website, you could just put in its full URL, starting with the “http://” part.
The width and height of the frame are denoted as either pixel values or percentages. You do need a closing </iframe> tag, even though you'd imagine it's un-needed, so don’t forget it. Anything you put between the tags will appear to browsers who can’t do iframes (i.e. Netscape 4).
Interaction
If you have multiple iframes on the same page you can have them interacting, by sending commands between them, just like normal frames. Check out this:
Again, this is basically the same method of interlinking you’ve learned in basic frames. You simply give your iframes a name attribute, and then add the appropriate target="name" to the link. So, the code would go something like this:
<iframe src="left.html" name="left"></iframe>
<iframe src="right.html" name="right"></iframe>
Then in left.html, add target="right" to the link. Easy. And if it’s not, you should probably have a look back over the first frames tutorial. If you want to set up this effect, you will need to create a blank html file to sit in the right iframe waiting to change — you cannot leave the src empty.
Also note how the Back and Forward buttons in your browser behave. If you click a link that opens in an iframe, pressing Back will make the frame return to its previous contents, and you’ll need to press Back again to go back a page in your history.
All the attributes
There are a load of attributes you can use on your inline frames, and they are:
frameborder="0"- setting the border to 0 gets rid of it, allowing the page to seamlessly integrate with your main page. Possible values are 1 (yes) and 0 (no), you cannot give it a bigger border.
marginwidth="x"- adds a margin to the sides of the framed page.
marginheight="x"- adds the margin to the top and bottom of the framed page. Added to any margins you've given the pages in their
<body>tags. scrolling="no"- if the framed page is too big for the dimensions you've specified a scrollbar will appear. This attribute will stop this from happening.
align="right"- like the image attribute, this will affect how the text around the frame aligns itself.
hspace="x"- sets a margin of white space around the frame to the sides.
vspace="x"- sets a white-space margin to the top and bottom.
