Introduction to Iframes

Iframes, or inline frames, allow you to load separate html files into an existing document. Iframes can be placed anywhere in the document flow. CSS and JavaScript can be used to manipulate properties of the iframe, such as its position and size. JavaScript can also be used to pass data back and forth between the document containing the iframe and the document loaded into it.

The iframe element bears a strong resemblance to the frame element and can be referenced via the frames array. The document displayed in the iframe can also access the main window using the same method used by documents in frames: the parent keyword. See more about this and other referencing methods below.

See this basic example for information about iframes if you are unfamiliar with the element and its attributes.

The iframe element is not valid in strict (X)HTML. Documents containing iframes will validate with transitional doctype declarations.

Loading New Documents into Iframes

New documents can be loaded into iframes, either by including a target attribute specifying the name of the iframe element, <iframe src="iframes.htm" </iframe> or through JavaScript.

Two methods are available for loading new documents via JavaScript. The first obtains a reference through the frames array and assigns the new url to the location property, as shown here:

  1. window.frames[iframeName].location = url;

  2. document.getElementById(iframeId).src = url;

Using the frames array for referencing is backwards compatible and more broadly supported by older browsers. The vast majority of browsers in current use will cooperate with assigning the new url to the iframe's src property obtained via document.getElementById:




All the attributes

Attributes you can use on your inline frames.


  • if the framed page is too big for the dimensions you've specified a scrollbar will appear. This attribute will stop this from happening.


  • setting the border to 0 gets rid of it, allowing the page to seamlessly integrate with your main page. Possible values are 1 (yes) and 0 (no), you cannot give it a bigger border.


  • adds some spacing between the iframe’s side borders and the page inside it.


  • adds some spacing between the iframe’s top and bottom borders and the page inside it. Any value you give marginwidth and marginheight will be added to any margins you’ve applied to the inner pages themselves.


  • like the image attribute, this will affect how the text around the frame aligns itself.


  • sets a margin of white space around the iframe to the sides.


  • sets a margin of white space to the top and bottom of the iframe, pushing it away from other page elements