jQuery: get content of a modified iframe

Question

I know similar questions have been asked before but none of the solutions worked for me so far.

$(document).ready(function(){
    alert($('#my_iframe').contents().html()); //displays null
});

I have a thickbox that includes an iframe. The iframe contains an image uploading/cropping tool, and I need to extract the uploaded image url and use it in the iframe parent.

How can I accomplish this? Is that even possible? Thanks for your help!

Answer 1

I think maybe your problem is that the iframe has not managed to finished loading its page before you ask for its html. The "document ready" function you have is only valid for the parent's doms and not the iframe's.

If you have a button (maybe the close button for the thinkbox) or any other event that will be triggered after the iframe has finished loading, then use something like this:

$("#my_iframe").contents().find("a.image_url").attr("href");

I hope this what you were looking for!

Answer 2

I don't quite understand why, but calling $().contents() on an iframe selection returns the a selection containing the document of the iframe. That is to say, it is the equivalent to calling $(document). Calling $().html() on a document selection will always return null. What you need to do instead is use the document as the context for a new search:

var imageUrl = $('#my_iframe').contents().find('#image_url').attr('href');

Answer 3

Mouhannad i right you need a load function first

 $(document).ready(function(){
   $('#my_iframe').load(function(){
      alert($('#my_iframe').contents().find("a.image_url").attr("href"));
    });
 });