JavaScript and Iframes - Tutorial and Examples

This tutorial describes and demonstrates using JavaScript to manipulate and interact with iframes, showing how to modify style and other 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 and what you can do about it.
Setting Iframe Height
How to set the height of an iframe to accommodate all of its content.
Dynamically Generating an Iframe
Create and insert an iframe using DOM methods.
Load Documents in Iframes
How to load new documents into iframes, with or without JavaScript.
Iframe Onload Event
How to trigger action once an iframe loads.
Load Documents Using Query String Data
How to load new documents into iframes using data supplied in the query string.
Using a Hidden Iframe
Precursor to AJAX and the HTML5 seamless attribute.
Fluid Iframe
A centered liquid iframe.

Back to top