Is there a way to execute jQuery similar to window.eval () in JavaScript?

Question

I have the following code to execute JavaScript in an iframe (in this case, frames [0], since the application contains only 1 iframe at any given time):

After work, if js contains core / pure JavaScript:

 var js = ""; // JavaScript code here frames[0].window.eval(js); 

But this does not work if `js' contains jQuery:

 var js = ""; // JavaScript or jQuery code here var preview = document.createElement('iframe_id'); preview.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ; document.body.appendChild(preview); frames[0].window.eval(js); 

Is there an alternative to window.eval () in jQuery? I know .globalEval () is, but that seems like a different purpose.

Answer 1

This is because jQuery has not loaded yet, you can attach onload or check onreadystatechanged in iframe to find out when it loaded.

Answer 2

You must ensure that the jQuery script is loaded before trying to use eval code that uses jQuery syntax. Take a look at this topic fooobar.com/questions/398211 / ....

 function scriptTag(src, callback) { var s = document.createElement('script'); s.type = 'text/' + (src.type || 'javascript'); s.src = src.src || src; s.async = false; s.onreadystatechange = s.onload = function() { var state = s.readyState; if (!callback.done && (!state || /loaded|complete/.test(state))) { callback.done = true; callback(); } }; // use body if available. more safe in IE (document.body || head).appendChild(s); } 

Change your code in the callback function as shown below and everything should be fine.

 var js = ""; // JavaScript or jQuery code here scriptTag("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", function(){ frames[0].window.eval(js); }); 

I tested it here http://jsfiddle.net/SFUbg/2/ . I don’t know why in this function the scriptTag doc used instead of the document, since it is not equivalent, so I changed it.

Answer 3

The reason may be because your iframe is not loading the jquery library. Try:

 var js = ""; // JavaScript or jQuery code here var preview = document.createElement('script'); preview.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ; frames[0].window.document.body.appendChild(preview); frames[0].window.eval(js); 

• document.createElement('script'); instead of document.createElement('iframe_id');
• Run this line frames[0].window.document.body.appendChild(preview); to load jquery for your iframe.

Answer 4

jQuery is not a separate language. At least one reason your code will not work is because createElement accepts a tag name that "iframe_id" is not.

In addition, you install src iframe directly in jQuery. You should install it on an HTML page or something like: empty, and then load jQuery somehow. The easiest way to download it is to simply set the iframe URL to an HTML page with explicit jQuery loading.

EDIT: If an iframe already exists and is loaded, and you just want to add jQuery to it, Jan.J's answer should help.

Answer 5

Here is the code that we use quite successfully in a project that uses several frames adapted to what you are doing:

 function setContent(source) { var iframe = document.createElement("iframe"); iframe.style.opacity = 0.0; document.body.appendChild(iframe); // set new content doc = iframe.contentDocument; doc.open(); doc.write(sourceCode); doc.close(); // kill off old iframe document.body.removeChild(document.querySelector("iframe")); iframe.style.opacity = 1.0; // inject the script you needed var scriptElement = doc.createElement("script"); scriptElement.src = "..."; doc.querySelector("head").appendChild(scriptElement); } 

And for the working code http://jsbin.com/iFoZAdU/8/edit .

Now never submit five identical questions, please.