How to use jQuery methods inside an iframe context

Question

I couldn't find how to do this after digging through S\O. Im using javascript to create an iframe and then i'm loading jQuery into the Iframe. Now I just want to call methods such as $ajax in the Iframe context. Below is how i did it.

var iframe = document.createElement('iframe');
iframe.name = "loginFrame";
iframe.id = "loginFrame";
document.body.appendChild(iframe);
var idocument = iframe.contentWindow.document;
var jq = idocument.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
idocument.getElementsByTagName('body')[0].appendChild(jq);
jq.onload = function () {
}

This works and idocument will in fact have the jQuery script in its body. Now using the Iframe, how would I make calls using jQuery?

idocument.$.ajax(url, settings)

Does not work and returns Uncaught TypeError: Cannot read property 'ajax' of undefined error. Any help is much appreciated?

No real need to inject jQuery into iframe if you have it in main window. — charlietfl, Jul 08 '16 at 22:25

nshoo · Accepted Answer · 2016-07-09T14:21:37.823

5

EDIT: For the following method to work properly the iframe src cannot point to a different domain, and must be set, for example

iframe.src = "about:blank"

The jquery "$" is an attribute of the window object of the iframe.

So you can access jquery using

iframe.contentWindow.window.$

If you wanted to make an ajax call you would do:

iframe.contentWindow.window.$.ajax(url, settings)

Also if you want to use Jquery the normal way you can do

$ = iframe.contentWindow.window.jQuery

Note: This should be in jq.onload and this will conflict with jQuery if it is on the main page so you could instead do:

iframe.$ = iframe.contentWindow.window.jQuery

Hope this helps!

edited Jul 09 '16 at 14:21

answered Jul 08 '16 at 22:14

nshoo

939
8
17

for some reason I'm getting "$ is not a function" – derloopkat Jul 08 '16 at 22:57
Did you run this in a browser console? I'm not sure but I think this is what causes the error. – nshoo Jul 09 '16 at 00:30
I'm just getting same error either in console or browser. Initially I thought it could be that jquery library is added asynchronously but it doesn't explain why it fails in console. Have you tried to run your code? – derloopkat Jul 09 '16 at 00:34
this is what I tried so far: iframe.contentWindow.window.$('body').append('this does not work'); iframe.contentWindow.window.document.write('this works'); – derloopkat Jul 09 '16 at 00:39
Yeah, that's what i just tried and your right, I think i'll remove it from my answer. Thanks! – nshoo Jul 09 '16 at 00:40
ifram.src = "#" fixed it! – nshoo Jul 09 '16 at 01:11

score 2 · Answer 2 · answered Jul 08 '16 at 22:14

2

Have you tried this? iframe.contentWindow.$.ajax(url, settings)

answered Jul 08 '16 at 22:14

lmcarreiro

5,312
7
36
63

score 0 · Answer 3 · edited May 23 '17 at 12:32

I found this worked for me using a method from another SO solution:

[Stackoverflow] Why does appending a <script> to a dynamically created <iframe> seem to run the script in the parent page?

First 3 lines of your code then:

 //* Updated to use the 2.1.4 jquery...(and tested still works!)
 // create a string to use as a new document object
var val = '<scr' + 'ipt type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></scr' + 'ipt>';

//If you want to add further script tags un-comment:
//val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>';

// get a handle on the <iframe>d document (in a cross-browser way)
var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) {
doc = doc.document;
}

// open, write content to, and close the document
doc.open();
doc.write(val);
doc.close();

//Assuming this is the first script tag in the iframe...
doc.getElementsByTagName('script')[0].onload = function () {

//* necessary for cross-browser function have to get the original document context:
var doc = iframe.contentWindow || iframe.contentDocument;

//Edited to initialize $ not in global namespace yet:
// to scope the jQuery's $ to the iframe...
var $ = doc.$;
//Finally you can use jQuery to do ajax
$.ajax({ });
}

Out of curiosity why can you not give the parent window access to jQuery? Something to do with security issues?

How to use jQuery methods inside an iframe context

3 Answers3