parent.document.getElementById("...") is null or not an object in IE7

Question

I have done some research, but as a JavaScript novice, I can't seem to get anything to work for my specific case:

I have an iframe in a page, and in that iframe's document, I have the following code:

function fun(){
var slideTitle = api.getField('title');
    parent.document.getElementById("slidecaptionOoH").innerHTML = slideTitle;

In the parent document I have: <h4 id="slidecaptionOoH"></h4>

I've tried putting a comment in between the tags, but I still get the error in IE7. The page displays fine, but obviously I don't want people to see the error.

---

Well, I think I've narrowed down the problem a bit. I think it may have to do with the iframe document's function executing before the parent is finished loading. I'm using the treesaver.js framework in the parent, which involves heavy DOM manipulation. When I turn off treesaver, I no longer receive the error.

So I guess my question now is, how do I delay the function until the parent is finished loading? Or delay the loading of the iframe document altogether?

Solution

You can keep pooling the parent until it has loaded the respective child with:

function fun(){
    var slideTitle = api.getField('title');
    var el = parent.document.getElementById("slidecaptionOoH");
    if (el){
        el.innerHTML = slideTitle;
    } else{
        setTimeout(fun, 50);
    }
    el = null;
}

But this is just a(dirt) work around.