17

I have a file, let us call it parent-win.html, served by domain example.com. This file has jquery included in it. An iframe, lets call it iframe-win.html, is embedded in this page. iframe-win.html has a form element with id form-elem and value Hello World!. Now I do following inside iframe.

var jQuery = parent.jQuery;
console.log(jQuery('#form-elem').val());

According to my limited knowledge of JS I should see Hello World! on console but instead I see undefined. Now, my question is do I need to load jquery again in an iframe or can I utilise jquery object already loaded in parent window?

Do note that this is not as usual access iframe/parent content from parent/iframe.

Kumar
  • 5,038
  • 7
  • 39
  • 51
  • possible duplicate of [Access jQuery library from iframe](http://stackoverflow.com/questions/5481613/access-jquery-library-from-iframe) – Thom Smith Jun 08 '12 at 13:55

3 Answers3

26

try this in the iframe:

if (typeof(jQuery) == "undefined") {
    var iframeBody = document.getElementsByTagName("body")[0];
    var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); };
    var $ = jQuery;
}
Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
  • This is what I was looking for! I just now asked a colleague if I need to pass iframe as a context to jQuery. Thanks Moin! – Kumar Jun 08 '12 at 13:57
  • 7
    This answer doesn't consider all the other argument types the jQuery function can take besides a string selector. – thwd Sep 23 '13 at 10:07
  • I found using document better than using iframebody: return parent.jQuery(selector, document) – boisvert Jun 03 '15 at 10:22
  • This is not work on fancybox. How can I solve this problem? – namal Feb 14 '16 at 04:12
  • DOMException: Blocked a frame with origin "http://localhost:55783" from accessing a cross-origin frame. – Kashif Khan Feb 23 '17 at 09:39
  • Will this work in a pop out window? I've been trying something like: var jQuery = function (selector) { return window.opener.jQuery(selector, iframeBody); }; – Rod Jun 09 '17 at 18:22
8

Here is a better solution based on the Moin's answer:

if (typeof(jQuery) == "undefined") {
    window.jQuery = function (selector) { return parent.jQuery(selector, document); };
    jQuery = parent.$.extend(jQuery, parent.$);
    window.$ = jQuery;
}

So we can use $'s functions like $.get, $.extends, etc.

Andrey Shamakhov
  • 342
  • 5
  • 12
  • and also works in `head` while Moin's answer must be put inside `body` – cske Oct 07 '16 at 13:43
  • One-liner, quick & dirty: `window.$=window.jQuery=parent.jQuery.extend(function(s){return parent.jQuery(s,document)},parent.jQuery);` – Gerald Jun 12 '18 at 18:37
  • The accepted solution did not work for me. This one did. Thanks Andrey! – M.Shute Jul 10 '18 at 17:53
1

You need to load jQuery inside the iframe.

EDIT: Okay, if the frame is not on the same domain, then you do not have to reload jQuery. See Access jQuery library from iframe

Community
  • 1
  • 1
Thom Smith
  • 13,916
  • 6
  • 45
  • 91
  • That I know. But if you console.log jQuery in the example given above it does show jQuery object. Moreover I can access an object from parent using parent.object() then why not jQuery? – Kumar Jun 08 '12 at 13:52
  • Thom Smith, read the answer you linked to again, cos if the iframe is on different domain, you DO have to load jQuery inside it. – dimention Mar 14 '15 at 15:21
  • The answer linked to doesn't work, see its comments for details. – boisvert Jun 03 '15 at 09:39