Wait for iframe to load in JavaScript

I am opening an iframe in JavaScript:

righttop.location = "https://stackoverflow.com/questions/1463581/timesheet_notes.php";

and then want to pass information to it:

righttop.document.notesform.ID_client.value = Client;

Obviously though, that line isn’t going to work until the page has fully loaded in the iframe, and that form element is there to be written to.

So, what is the best/most efficient way to address this? Some sort of timeout loop? Ideally I would really like to keep it all contained within this particular script, rather than having to add any extra stuff to the page that is being opened.

First of all, I believe you are supposed to affect the src property of iframes, not location. Second of all, hook the iframe’s load event to perform your changes:

var myIframe = document.getElementById('righttop');
myIframe.addEventListener("load", function() {
  this.contentWindow.document.notesform.ID_client.value = Client;
});
myIframe.src="https://stackoverflow.com/questions/1463581/timesheet_notes.php";

Again, this is all presuming you mean iframe, not framesets.

I guess you can pretty easily do this with jQuery… jQuery Home
Just hook the page to the jQuery $ function ()… e.g.

$(document).ready(function() { 
    $('iframe').load(function() { 
       // write your code here....
    });
});

Have a quick look at the file uploader example here:
Using iframes for multiple file uploads…

try this one…

$('iframe').each(function() { 
    $(this).ready(function() {
        $('#result').html("ready");
    });
});

iFrame could have dynamically loaded elements and the best option to work with them is to use recursion:

 $('iframe').ready(function() {
   var triggerMeAgainIfNeeded = function() {
      setTimeout(function() {
          var neededElm = $('.someElementThatLoadedAfterIframe');
           if (neededElm.length > 0) {
             // do your job
           } else {
             triggerMeAgainIfNeeded();
           }
       }, 10);
   }
});

Leave a Comment