JavaScript and Iframes - Tutorial and Examples

This tutorial describes and demonstrates using JavaScript to manipulate and interact with iframes, showing how to access and modify properties of the iframe element, how to communicate with the document inside the iframe, gaining information from it and passing information to it, as well as limitations on such access. Topics include:

Iframe Basics
An introduction to iframes and a basic example.
Cross-Document Communication
How to obtain references so you can communicate between the document containing the iframe and the document inside the iframe.
Same Origin Policy
Information on the access denied errors that occur when trying to communicate between documents on different domains.
The postMessage Method
How to use the postMessage method with iframes when the documents are on different domains.
Setting Iframe Height
How to set the height of an iframe to show all of its content without need for iframe scrollbars.
Dynamically Generating an Iframe
How to create and insert an iframe using DOM methods.
Changing Iframe Src
How to change iframe src to a new URL, with or without JavaScript.
Iframe Onload Event
How to trigger action once an iframe loads.
Loading Documents Using Query String Data
How to specify URLs for iframes using data supplied in the query string.
Using a Hidden Iframe
How to use a hidden iframe to emulate some of the features that HTML5's seamless attribute will provide.
Fluid Iframe
A centered liquid iframe.