The HTML iframe Tag Reference, Sample Code & Techniques

The regular HTML frames (which use <frameset> and <frame>) tags are used to divide a webpage into multiple parts. Each part is a distinct window which can be used to load a separate HTML document.

An inline frame (iframe) is a special kind of frame which can also be used to insert an HTML document into a webpage. The only distinction with regular frames is that an iframe is implemented inline. This means that it can be embedded anywhere within a webpage, and scrolls along with the rest of the content.

For all intents and purposes, an iframe looks like a regular page element. The only difference is that it can be used to load another web page. It gets interesting when the other document contains links and other interactive features. More on this later. Let’s start with the basics.

Creating An iFrame

An iframe is created using the <iframe> tag. A simple example of the iframe is here:

<iframe src="http://link/to/another-page.html"> </iframe>

The src attribute points to the link to the web page to be loaded in the iframe.
(Click on the HTML tab to see the source)

22934

Width and Height of the iframe

You can give your iframe a specific width and height. For example, let’s give our iframe a width of 500 and a height of 300

<iframe src="http://link/to/another-page.html" width="500" 
height="300"> 
</iframe>

22934

How to remove the border from the iframe

The <iframe> tag has an attribute called “frameborder” which is used to add or remove a border. Frameborder accepts two values “0” or “1”. Zero means no border, and one means there is a border. The default value for frameborder is “1”. To remove the border,set the value to “0”

The frameborder attribute is not supported in HTML5. Use CSS to set the border.

Using CSS to set the border of the iframe

The modern way to set the border of the iframe is to use CSS. In your CSS file, set the border for iframe element to 0.

CSS

iframe
{
  border:0;
}

Opening Links in the Main Window

The HTML documents which you display within an iframe may contain links. By default, clicking on the link loads the document within the iframe.

There are certain situations when such behaviour is undesirable. You may want clicking on a link to load in the main window. To do this, you need to add a “target” attribute to the link, and give it a value of “_parent” or “_top”.
To make the document in the example to load in the parent, update <a> tag as follows:

<a href="other-page.html" target="_parent">Click </a>

Resizing An iFrame Based On Content

As mentioned earlier, you can determine the display size of an iframe by setting its width and height attributes. Although this is great, it can work best when you know the dimensions of the original document. Otherwise, part of the content can be hidden, and a user would have to scroll in order to see it.
You can resize the iframe based on the content size using a bit of Javascript.
Here is the code:

function resizeIframe(id)
{
    var newHeight;
    var newWidth;

    if(document.getElementById)
    {
        newHeight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newWidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newHeight) + "px";
    document.getElementById(id).width= (newWidth) + "px";
}

add an id attribute to the iframe tag and call this function after loading the iframe.

IFrame restrictions

When an iframe is embedded from another website, the browser sets certain restrictions for better security. The primary restriction is that the script from the main page can not access the iframe and its content. The restrictions are lifted only when both the main page and the iframe embedded page are on the same website and both are loaded using the same protocol (example http,https). So the script above will work only if both the pages are on the same website.