javascript: waiting for an iframe page to load before writing to it (but not from the page that's triggered the load)

Question

Apologies if this has been answered elsewhere, but I haven't been able to find it referenced. (Probably because nobody else would want to do such a daft thing, I admit).

So, I have a page with three iframes in it. An event on one triggers a javascript function which loads new pages into the other two iframes; ['topright'] and ['bottomright'].

However, javascript in the page that is being loaded into iframe 'topright' then needs to send information to elements in the 'bottomright' iframe.

window.frames['bottomright'].document.subform.ID_client = client; etc

But this will only work if the page has fully loaded into the bottomright frame. So what would be the most efficient way for that code in the 'topright' iframe to check and ensure that that form element in the bottomright frame is actually available to write to, before it does write to it? Bearing in mind that the page load has NOT been triggered from the topright frame, so I can't simply use an onLoad function.

(I know this probably sounds like a hideously tortuous route for getting data from one page to another, but that's another story. The client is always right, etc...:-))

Answer 1

If I understand your problem correctly, and you control the content of all the frames, and all the frame content is from the same domain, you can trigger an onload event on the bottomright frame to pull the data from topright, rather than trying to push it.

bottomright can even invoke a function in topright and ask it to push the data (which in my mind is still a form of pull).

Something like this:

// topright
function pushData(frame, form, name, value) {
    frame.document.forms[form].elements[name] = value;
}

// bottomright
window.onload = function () {
    top.frames['topright'].pushData(window, 'sub_form', 'ID_client', 'client');
}

Untested. I'm not 100% sure passing window from bottomright will work, in which case this might be an alternative:

// topright
function pushData(frame, form, name, value) {
    top.frames[frame].document.forms[form].elements[name] = value;
}

// bottomright
window.onload = function () {
    top.frames['topright'].pushData('bottomright', 'sub_form', 'ID_client', 'client');
}