Jquery Iframe Inheritence

Question

Good morning peoples.

I am mid way through building a very complex application using jquery.

In short modules are loaded into iframes (to keep sandboxing and allow for varying things).

I am having a bit of trouble referencing the jquery object / library in the iframe (from it's parent).

I can write functions that are included in the parent and call them with parent.$().mymodule({...}); where the module has to scan the document for the iframe then retrieve it's content then look for the elements to apply the methods to (bit long winded but it works!!)..

THis morning I decided there must be a better way to do it and thats to add the functions for the module directly into the Iframe so they have some context, the trouble is that I cannot reference the jquery object from the parent at all inside the iframe .. I assumed that parent.$("").show("#some-element-in-the-iframe") would have enough context to select an element in the Iframe but it just seems to try and find that element in the parent document.

What I would like to know is....

Is there a way I can use the jquery loaded into the parent and its methods or do I have to load a seperate instance of jquery into the iframe - and if I have to load this new instance of jquery will it load from client cache or will it have to download the library again from the server.

It seems it should be possible but that "parent" seems to switch the context of the selector back to the parent document.

I have tried to add the context parameter into parent.$("#some-element","#iframe-id") but that doesnt work either.

Thanks in advance for any advice / guidance.

Alex

Answer 1

Include jquery in your iframed pages. As long as they use the same url then it will use the browser cached version.

Answer 2

You use $('#some_iframe').contents() to get a wrapper on the document object of a iframe:

$('#some_iframe').contents().find('#some_element').show();

But this is limited. For the simple case of show() you can get away with it, but in general a single instance of jQuery is not designed for cross-document scripting; some operations (particularly content creation) are likely to fail. If you want to use all jQuery's features you will usually need to load a copy of jQuery into each separate document.

Getting the window object (the container for your global functions, $, etc) for the parent document is easy: parent. Getting the window object for a child document isn't quite so easy. In theory, it should be doable through frames.some_iframe, but historically—and, in Firefox, this is still the case—that doesn't work for id="some_iframe" but only for the deprecated name attribute.

One can instead go from the DOM object of the iframe itself to the window, but how you do that is not standard across browsers either, and jQuery doesn't help you with it.

var iframe= document.getElementById('some_iframe');  // or $('#some_iframe')[0]
var iwindow= 'contentWindow' in iframe? iframe.contentWindow : iframe.contentDocument.defaultView;
iwindow.$('#some_element').show();

(contentWindow is an IE extension not supported everywhere. contentDocument is standard but not supported in IE.)

if I have to load this new instance of jquery will it load from client cache

Yes.