Monday, September 7, 2009

Access IFrame content using Jquery

This is really helpful post for so many people who are using frames in their pages and want to access content inside it from main[parent] page. I really faced so many problems to read the data inside a frame and use it on the current page. So, it's simple and nice to know this tip for JQuery lovers.

HTML:

In Parent file, for example iFrame is declared as below.

<iframe id="uploadIFrame" scrolling="no" frameborder="0" hidefocus="true" style="text-align: center;vertical-align: top; border-style: none; margin: 0px; width: 100%; height: 60px;" src="IFrameExample.htm"></iframe>

In IFrameExample.htm, assume there is a hidden control as shown below.

<input type="hidden" id="hiddenExample" name="hiddenExample" />

So, now I will tell you how to set the "hiddenExample" hidden control value from the parent file. Because, we can’t directly access it through java script/HTML. We need to use below logic to get it working.

var $currentIFrame = $('#uploadIFrame');
$currentIFrame.contents().find("body #hiddenExample").val("Value from parent file.");

That's it!!! You are done with assigning some value to hidden variable inside IFrame. And in that iFrame you can access this hidden control on server side[C# or VB etc..] too. For it, you need to follow my other post. Very simple, but hard to find. Below is the nice explanation of above code. [How it will work.]

So, we are using Jquery, you know how to define JQuery object and use it in DOM. I created a variable[Object] currentIFrame which holds the whole IFrame reference. And in the second line, I am using the contents() method, which actually returns me all the HTML code of the frame. So, as we already know, find is the method we need to use to find out any element in a given scope/context. So, it tries to find out the occurrence of given criteria in current frame. I think you understood well how it works. If you are having multiple IFrames then you can define class for <iframe> instead of id and you can catch it in Jquery by using "." operator instead of "#". Is it a new and good find? Please let me know, if this helps you or any questions if you have.

17 comments:

  1. Works great in firefox, safari and chrome, unfortunately it throws an exception in IE. Have you encountered this by any chance?

    ReplyDelete
  2. It's working great in all browsers for me. Can you please send me the piece of code you have written and error details?

    ReplyDelete
  3. great one, really very helpfull.
    Cheers

    ReplyDelete
  4. can this be done if the src of the iframe is a page from another domain ?

    ReplyDelete
  5. nevermind, i just read that it does not work if it's not on the same domain.

    ReplyDelete
  6. Super, simple description and it works great. Unfortunately most of the time you find a treasure like this after reading so many "far from home solution" posts on forums. Thank you.

    ReplyDelete
  7. Unfortunately this doesn't work for me. I got a dynamically loaded iframe in a thickbox, and I get null content when I try to access it with the technique presented here...

    ReplyDelete
  8. I just took half of a day working on frame problem with jQuery.

    I can tell you that this tips saved me ALOT of R&D.

    ReplyDelete
  9. does only work for iframes loaded from the same origin, though...

    ReplyDelete
  10. To @tudor , Yes it work fine if you use iframes.

    ReplyDelete
  11. awesome! exactly what i needed.

    ReplyDelete
  12. does not work in different domains

    ReplyDelete
  13. Praveen, thanks for explanation and code. But I have to do it other way round. I have hidden variable in Iframe and value is set to it. Now i want to access value of hidden variable (defined in Iframe) to my parent page. Can you please provide my code for same

    ReplyDelete
  14. For those of you using Internet Explorer, you can fix any iframe communication problems by adding:

    document.domain='mydomain.com';

    To both the parent window javascript header, and the frame page javascript header.

    Basically, it tells the computer that X frame is from X site, and internet explorer uses it to validate whether the javascript is authorized to function in such parent - child ways.

    ReplyDelete