2

I am trying to develop an interactive widget that utilizes jQuery within an iframe, but relies on the jQuery object that already exists in the parent document rather than making an additional server request for its own jQuery instance. This is significant because the widget will be loaded into the parent document several times on a page - therefore requiring an http request each time it appears on the page is not desired. Instead, I would like to pass the parent's jQuery object instance (I am certain it will be available in the parent document) to be used within the iframe.

With the understanding that this is a "friendly" iframe (i.e. it is permitted to openly communicate with the parent document), I assumed it would be as simple as:

window.jQuery = window.parent.jQuery;

While this seems to provide the jQuery namespace to become available within the iframe (and logging this namespace shows the expected jQuery function string), it does not seem to be able to reference elements within the iframe. For example:

window.jQuery = window.parent.jQuery;
console.log(jQuery); // logs: function (e,t){return new w.fn.init(e,t,r)}
console.log(jQuery('#elem-in-iframe')); // logs: []

Therefore it seems like the jQuery object being passed into the iframe from the parent document is still limited by the scope of the parent.

Ultimately, I have had to settle for creating an independent instance of jQuery within each iframe that loads on the page - so instead of loading the jQuery library once on initial page load, it is loaded on initial page load as well as each time the widget is injected into the parent document. While this does not inhibit the parent window from loading, as the iframe loads independently, it is not the desired result. I would like to explore how it may be possible to inherit and use jQuery from the parent within the iframe.

Brian S
  • 121
  • 2
  • 15
  • possible duplicate of [How to access the content of an iframe with jQuery?](http://stackoverflow.com/questions/1796619/how-to-access-the-content-of-an-iframe-with-jquery) – Casey Falk Jul 16 '14 at 18:54
  • Check the "related" questions on the right side of the page, first. – Blazemonger Jul 16 '14 at 18:54
  • I did not find any threads here or on google that answered my question. The related article mentioned by Casey refers to accessing iframe content from the parent. My concern relates to accessing the jQuery *object* (that is instantiated in the parent document) from the iframe without having to make a server request within that iframe. I understand how this sounds like a question that has been asked & answered many times before, here and elsewhere, but I assure you I went through several related threads and google searches and found nothing relevant – Brian S Jul 16 '14 at 19:02
  • is this what you need? http://stackoverflow.com/questions/5481613/access-jquery-library-from-iframe – G.Mendes Jul 16 '14 at 19:08
  • @G.Mendes Ah the influence of keyword selection; "pass" becomes "access", "object" becomes "library" and you get a whole new list of results. Unfortunately the post you linked to mentioned my original (not working) solution as its top voted answer. That method has not worked for me – Brian S Jul 16 '14 at 19:18

1 Answers1

2

I think you are wrong in your assumption

therefore requiring an http request each time it appears on the page is not desired

jQuery will be cached by the browser as long as it is getting it from the same URL. It is basically a free request.

Now, the reason you can't "share" the jQuery object as you want, is that selector's have a context.

A DOM Element, Document, or jQuery to use as context

The default is document (I believe), and as you are accessing the parents object, it's default is the already set document. You should be able to do:

window.jQuery = window.parent.jQuery;
jQuery('#elem-in-iframe', document)

In the iframe to pass in the iframes window as the context, and then it should theoretically work.

You may even be able to do this in the iframe:

window.jQuery = window.parent.jQuery;
$ = jQuery(document);

and then you can just do

$('#elem-in-iframe')
dave
  • 62,300
  • 5
  • 72
  • 93
  • Interesting - I will try this. What assumption exactly are you referring to? Just trying to make sure I understand your response as you intended – Brian S Jul 16 '14 at 19:08
  • 1
    The assumption that it requires an http request each time it appears - you realistically will have only one http request, and the rest will already be cached by the browser, so it will just use the cached version. – dave Jul 16 '14 at 19:09
  • I tried logging the jQuery/$ variable name early on in the iframe's code but it is undefined. I would imagine that means the iframe's scope does not include an instance of its parent's jQuery object – Brian S Jul 16 '14 at 19:20
  • I guess I wasn't clear, you still need to import the `window.parent.jQuery`, THEN you can set it's context to the current window. – dave Jul 16 '14 at 19:24
  • Upon further review, it seems that this works as intended. However, my development environment is more complicated (I will update my original question with this information)... At some point, the 'jQuery' object present in the iframe is passed into an IIFE as a parameter, with '$' as the associated argument. It is at this point that the jQuery library ceases to work as intended. I do not understand why – Brian S Jul 16 '14 at 19:43
  • Post the IIFE and I'll take a look at it. – dave Jul 16 '14 at 21:28