55

I am opening an iframe in JavaScript:

righttop.location = "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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Bill Dawes
  • 553
  • 1
  • 4
  • 5

4 Answers4

97

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 = 'timesheet_notes.php';

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

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Crescent Fresh
  • 115,249
  • 25
  • 154
  • 140
  • Is there any way to do this by attaching an event? Let's say that the iframe may have it's own onload handlers and I don't want to accidentally clobber them by reassigning the onload property. – Eric Nguyen Sep 23 '09 at 18:29
  • 1
    @Eric: yes. Use a library like Mootools, Prototype 1.6 or jQuery. If you don't have one of those, use this: http://ejohn.org/blog/flexible-javascript-events/ – Crescent Fresh Sep 23 '09 at 18:34
  • Ah... Does that mean that this onload function in the script that triggers the page load, might interfere with an onload function in the page that has been loaded? I guess as long as they are not both trying to write to/from the same element it will be alright? – Bill Dawes Sep 23 '09 at 20:52
  • @Bill: no, @Eric's question was about whether this answer will interfere with any `onload="..."` attribute set on the ` – Crescent Fresh Sep 24 '09 at 01:42
  • Weirdly enough I can get this to work as – Alper Jan 27 '16 at 15:27
7

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...

user956584
  • 5,316
  • 3
  • 40
  • 50
rajesh pillai
  • 8,102
  • 7
  • 43
  • 60
2

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);
   }
});
rolyanos
  • 143
  • 2
  • 9
  • If going for setTimeout(), I guess we don't need iframe .read() ie can do that right when document .read() – Nam G VU Apr 22 '22 at 16:19
  • Yes, @NamGVU but if iframe is added dynamically after document ready event then we need to listen iframe – rolyanos Jan 09 '23 at 12:37
0

try this one...

$('iframe').each(function() { 
    $(this).ready(function() {
        $('#result').html("ready");
    });
});
Yuda Prawira
  • 12,075
  • 10
  • 46
  • 54
  • 20
    The Original Poster never mentioned jQuery and hasn't got the jQuery tag in the post. I'd suggest then they aren't looking for a jQuery answer. – James Khoury Sep 13 '11 at 06:08