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
postMessagemethod 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
srcto 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.