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 app contains only 1 iframe at any given time):

Following works if js contains core/pure JavaScript:

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

But it 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 any alternative to window.eval() in jQuery? I know .globalEval() is there, but it seems to be for a different purpose.

score 1 · Answer 1 · answered Sep 04 '13 at 06:10

1

This is because jQuery didn't load yet, you could attach a onload or check onreadystatechanged on the iframe to figure out when it has loaded.

answered Sep 04 '13 at 06:10

hank

3,748
1
24
37

can you please give an example..about the 'onload' check? – Gandalf Sep 04 '13 at 06:12

score 1 · Answer 2 · edited May 23 '17 at 11:49

You have to make sure jQuery script is loaded before you try to eval code that uses jQuery syntax. Take a look at this thread https://stackoverflow.com/a/6725358/937367.

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);
}

Eval your code in callback function like below and all 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 that scriptTag function doc was used instead of document, as this is no equivalent, so I changed it.

score 1 · Answer 3 · answered Sep 04 '13 at 06:15

The reason could be your iframe does not load 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');
Execute this line frames[0].window.document.body.appendChild(preview); to load jquery for your iframe.

Matthew Flaschen · Answer 4 · 2013-09-04T06:30:14.527

jQuery is not a separate language. At least one reason your code will not work is that createElement takes a tag name, which 'iframe_id' is not.

Also, you are setting the src of the iframe directly to jQuery. You should be setting it to an HTML page, or about:blank, then somehow loading jQuery. The easiest way to load it is simply to set the iframe URL to a HTML page with an explicit loading jQuery.

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

score 0 · Answer 5 · answered Sep 12 '13 at 00:36

Here's code we're using quite successfully in a project that uses multiple iframes, adapted to your what you're seemingly 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 have a http://jsbin.com/iFoZAdU/8/edit for the working code.

Now never post five identical questions again please.

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

5 Answers5