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 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
- How to 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.