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 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.bing.com" style="width: 90%; height: 300px"></iframe>

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.cssdrive.com" target="internal">CSS Drive</a></div>
<iframe src="http://www.bing.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.

The X-Frame-Options

Many prominent web sites do NOT allow loading their web sites inside an IFRAME, such as Google and Yahoo, by way of the X-Frame-Options. In these cases the IFRAME will appear blank, so be sure to check each site you're loading into this script to confirm it works.