Detecting when Iframe content has loaded (Cross browser)

Question

I'm trying to detect when an iframe and its content have loaded but not having much luck. My application takes some input in text fields in the parent window and updates the iframe to provide a 'live preview'

I started with the following code (YUI) to detect when the iframe load event occurs.

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

'preview-pane' is the ID of my iframe and I'm using YUI to attach the event handler. However, trying to access the body in my callback (upon iframe load) fails, I think because the iframe loads before the event handler is ready. This code works if I delay the iframe loading by making the php script that generates it sleep.

Basically, I'm asking what is the correct approach across browsers to detect when the iframe has loaded and its document is ready?

Starting out with YUI is a bad idea (as well as any other JS library). Why? Because you just can't know what magic that library is doing. If they can't support "load" fully, you'd better do it yourself in clear and readable javascript. — Christian
You can often read the source code of the library @Christian . I find this usually gives you great tips on how to do it yourself regardless of whether you then use their implementation or not. — AJP
@AJP You misunderstood my point. If you're doing something you're not sure of, it's better to have less code so there's less room for errors. — Christian
Depends on how you look at it. I knew that YUI's event handling worked at the time, so I didn't have to worry about that part of the code. I also knew how to write my own addEvent handler, not that it worked any better than YUI with regard to this problem. — David Snabel-Caunt
@Nico The question refers to YUI and $ is an alias to YUI's Dom wrapper. — David Snabel-Caunt

bobince bobince · Accepted Answer · 2009-04-15T13:04:50

to detect when the iframe has loaded and its document is ready?

It's ideal if you can get the iframe to tell you itself from a script inside the frame. For example it could call a parent function directly to tell it it's ready. Care is always required with cross-frame code execution as things can happen in an order you don't expect. Another alternative is to set ‘var isready= true;’ in its own scope, and have the parent script sniff for ‘contentWindow.isready’ (and add the onload handler if not).

If for some reason it's not practical to have the iframe document co-operate, you've got the traditional load-race problem, namely that even if the elements are right next to each other:

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

there is no guarantee that the item won't already have loaded by the time the script executes.

The ways out of load-races are:

on IE, you can use the ‘readyState’ property to see if something's already loaded;
if having the item available only with JavaScript enabled is acceptable, you can create it dynamically, setting the ‘onload’ event function before setting source and appending to the page. In this case it cannot be loaded before the callback is set;
the old-school way of including it in the markup:

<img onload="callback(this)" ... />

Inline ‘onsomething’ handlers in HTML are almost always the wrong thing and to be avoided, but in this case sometimes it's the least bad option.

Detecting when Iframe content has loaded (Cross browser)

4 Answers