Iframes - Basic Information

Iframes, or inline frames, allow you to load separate HTML files into an existing document. Iframes can be placed anywhere in the document flow. The following demonstrates an iframe with basic attribute settings:

<iframe id="ifrm" src="demo.html"></iframe>

The iframe's src attribute specifies the URL of the document to be displayed in the iframe. Although attributes are available to control width and height, we use the following CSS to control the appearance of our example:

iframe {
    border:1px solid #ccc;
    width:80%; height:120px;
}

This is how the iframe displays:

Scrollbars will appear automatically if they are needed to display all the content in the iframe. If you don't want the iframe scrollbars to appear, you can use JavaScript to set the height of the iframe to show all is content.

More About Iframes

CSS and JavaScript can be used to manipulate the appearance and properties of the iframe element: its position, size, and src, for example. JavaScript can also be used to pass data back and forth between the document containing the iframe and the document loaded into it. Topic areas listed on the right present examples.

Iframe Document Styles: The document loaded into the iframe does not inherit styles from the containing document. Styles to be applied to iframe content need to be included in that document.

Links in and to Iframes: New documents can be loaded into iframes using the link target attribute or JavaScript. Links inside iframes load new documents into the iframe by default, but you can set the target attribute to _parent to replace the containing document.

Iframe Attributes: The HTML iframe element provides a collection of attributes for specifying its appearance and behavior, such as src, width, height, sandbox, and more. W3 Schools and MDN list and describe the iframe element's attributes.

Find out about the iframe onload event and other iframes topics from the list on the right.