Embedding a document inside another using the<iframe> tag
So, you're looking for a way to embed a document inside another, similar to the "picture-in-picture" feature of my next door neighbour's TV? Well, you're in luck. There actually exists a number of ways putting a document inside another. In this tutorial, we'll look at the IFRAME tag.
Introduction to the <iframe> tag
The <iframe> tag is a neat little tag of IE 4 that allows you to create an "internal" frame inside your document. The internal frame can contain any HTML document, and clicking a link inside the <iframe> causes the target document to be loaded inside the internal frame as well. The general syntax of the <iframe> is very simple:
<iframe src="http://www.google.com" style="width: 90%; height: 300px"></iframe>
Wow, some frame, uh? As you can see, the iframe tag accepts three basics attributes: the "src" attribute, the "width" attribute, and the "height" attribute. Their roles should be obvious.
Creating outside links that loads in the <iframe>
Now that you have a general understanding of the <iframe> tag, it's time to learn how to alter links so they load inside the <iframe>. The way to do it is the same as altering links so they load inside a specific frame- through the optional "name" attribute of the <iframe>. Take a look at the below example:
<div><a href="http://www.yahoo.com" target="internal">Yahoo</a></div> <iframe src="http://www.google.com" style="width: 90%; height: 300px" name="internal"></iframe>
By giving the <iframe> a "name" attribute, and using the "target" attribute of the <a> tag to specify that name, you get a link that loads in the <iframe>.
Removing the visible border around the <iframe>
Finally, a lot of webmasters are interested in removing the visible border from the <iframe> tag, to create a seamless iframe. This can be done through the following combination of HTML attributes:
<iframe src="http://www.google.com" style="width: 90%; height: 300px" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"> </iframe>
As you can see, even the scrollbars are removed, so you should ensure that the height of the iframe accommodates fully the entire page contained inside the iframe.