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. See an example iframe.

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.[1] Topic areas listed on the right present examples.

Validation: Documents containing iframes will validate with an HTML5 doctype. The iframe element is not valid in strict XHTML or strict HTML4, but will validate with a transitional XHTML or HTML4 doctype declaration. Some of the attributes that are valid in HTML4 are not valid in HTML5, for example, frameborder and scrolling.[2]

Iframe Document Styles: The document loaded into the iframe does not inherit styles from the containing document.[3] 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. See an example.

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

  1. Read about JavaScript's Same Origin Policy for cases when the containing document and iframed document are not on the same domain. ^
  2. See W3 Schools for information about iframe attributes for both HTML4 and HTML5. ^
  3. HTML5 introduces a seamless attribute that will enable style inheritance, but browsers do not yet support it.^