Question

I am trying to do some changes to a different frame using javascript, but I need to wait until it is properly loaded.

I have frame-B which does some changes to the content of frame-A. I have set a flag in frame-A when it has finished loading:

frame-A:

// Flag to indicate that the page is loaded. Used by frame-B
var documentLoaded = false;
$(document).ready(function () { documentLoaded = true; });

frame-B:

function onLeftFramesLoad(loops) {
    // Check if the menu frame is finished loading, if not try again in Xms.
    // To Avoid eternal loop if for some reason the documentLoaded flag is not set after Y seconds: break loop.
    if (!parent.frames[0].window || !parent.frames[0].window.documentLoaded && 
        loops < 40)
    {
        setTimeout(onLeftFramesLoad(loops + 1), 250);
        return;
    }
    // do changes to frame-A
}

// Using jQuery here to wait for THIS frame to finish loading.
$(document).ready(function() {
        onLeftFramesLoad(0);
});

My problem is that when frame-B loads before frame-A it doesn’t wait for frame-A to load. I.e. the setTimeout part doesn’t seem to work.

frame-B only takes about 30ms so it doesn’t time out.

Firebug gives me this message in the javascript console:

useless setTimeout call (missing quotes around argument?)

Tested in FF and chrome.

Answer 1

setTimeout(onLeftFramesLoad(loops + 1), 250);

What this does is execute the return value of onLeftFramesLoad(loops + 1), so it executes onLeftFramesLoad before the setTimeout. this is basically the same as writing:

setTimeout(undefined, 250); // onLeftFramesLoad always returns undefined

undefined() doesn’t work, obviously. The correct way to do this would be

setTimeout(function() {
  onLeftFramesLoad(loops + 1);
}, 250);

As this is a function and thus executable.

For more info on the setTimeout function, check https://developer.mozilla.org/en/window.setTimeout