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.
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.