CODEWITHSUNDEEP
javascriptdomonload
user1675891
user1675891

Reputation:

Ensuring that onLoad of an IFRAME doesn't execute too soon

I just discovered that the source of my issues is that the parent HTML makes calls to controls in a child IFRAME but is too quick about that and, sometimes, the super onLoad attempts to do so before the sub onLoad had a chance to add stuff to the DOM.

What can I do about it?

I've tried to set up some kind of feed-back from onLoad in the child. Failed miserably with so many strange errors that they can be summarized by dude, just please don't.

I've tried to set up a delayer, which is ugly of epic proportions and not 100% reliable.

EDIT:

In onload I do this:

var stuff = getReferenceToStuff();
var someDiv = stuff.contentWindow.document.getElementById("someDiv");
someDiv.className = "classy";

The problem is that sometimes the reference someDiv is null and sometimes (often when I reload the page by F5), it points to the correct element. I know it's because the contents of the IFRAME are a bit slower.

So my questions is this. How can I ensure that onload is postponed until the embedded IFRAME component's onload ensures that it's been loaded and all the components are there?

Upvotes: 1

Views: 4020

Answers (3)

Teemu
Teemu

Reputation: 23406

When using window.onload all content of the body, including content of the iframes and all other resources like images, should be loaded before the onload is fired. However, some browsers have had problems with timing on firing onload, i.e. different browsers trigger the event in different stage of page parsing.

If you're using DOMContentLoaded or jQuery's $(document).ready(), only the HTML of the main page is loaded, but some resources are still under work (including iframe's content loading). I'm not aware what happens if you attach an inline listener for the iframe element itself.

If there's timing problems, maybe not trigger the function needing iframe reference in main window at all. Instead invoke that function in main window in irame's window.onload. But even this won't tackle the problem, if you're using some asynchronous technique to populate the iframe. In this case you need to invoke the function in main window after all requests have been completed.

(Now you maybe also know, what are the codesnippets I'd like to see in your post : ) ).

Upvotes: 1

Florian Margaine
Florian Margaine

Reputation: 60787

The onLoad event isn't always working correctly on document. It works correctly on each element though.

var iframes = document.getElementsByTagName('iframe'),
    counter = 0,
    max = iframes.length;

[].forEach.call(iframes, iLoaded);

function iLoaded() {
    if (++counter === max) {
        callback();
    }
}

function callback() {
    // All the iframes are loaded
}

Upvotes: 1

closure
closure

Reputation: 7452

I have 2 solutions to your problem:

  1. If you are on HTML5, use window.postMessage. Just message from iFrame to the parent in the onload of iFrame. Parent should register handler in <script> tag, that appears before iFrame.

  2. Add a callback function to window in the '' tag before iFrame. This function is called by iFrame when it's load is complete. Here is the basic template.

Here is the sample template:

  <script>
  window.iframeCallback = function(message) {

    // first clear the temp function we added to the window
    // It is a bad practice to corrupt the global namespace
    delete window.iframeCallback;

    // you do your work here

  };
  </script>

  ..
  ..

  <!-- iFrame should appear after the above script-->
  <iframe/>

Upvotes: 0

Related Questions