Executing JavaScript

Question

I wonder how the JS on this site is executed when you click on "run":

It's not like JSFiddle, so he didn't use IFrames.

I searched the web and found reptl.it, that executes code too. I don't know if it works the same way. Can please someone explain the magic?

You can do something like: `var script = document.createElement('script'); script.text = ''; document.head.appendChild(script);`. — gen_Eric, Feb 11 '15 at 22:17
Study the "Run" button in developer mode. You can see all the magic. — Ruben Kazumov, Feb 11 '15 at 22:17

Rhumborl · Answer 1 · 2015-02-11T22:29:21.380

2

Looking at the source code, they just create a function containing the code in the textarea, using the Function constructor which takes the function body as a method. Then they call the function:

try {
    (new Function( jQuery("#code").val() ))();
} catch(e){
    error(e.message);
}

This works in a very similar way to eval with the exception that the new function cannot access variables in the current scope, as the Note in the link states:

Note: Functions created with the Function constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the Function constructor was called. This is different from using eval with code for a function expression.

edited Feb 11 '15 at 22:29

answered Feb 11 '15 at 22:18

Rhumborl

16,349
4
39
45

doh, I spent too long on my 2nd paragraph :) – James Thorpe Feb 11 '15 at 22:19
1

@JamesThorpe :) i know the feeling – Rhumborl Feb 11 '15 at 22:20
Thank you! :) So it's like `eval`? – gform Feb 11 '15 at 22:24
@gform not entirely - see the note in the linked page – James Thorpe Feb 11 '15 at 22:26
@gform The differences are also covered in [this question](http://stackoverflow.com/questions/4599857/are-eval-and-new-function-the-same-thing) – James Thorpe Feb 11 '15 at 22:27

score 2 · Answer 2 · answered Feb 11 '15 at 22:19

When you click run, it's submitting a <form> that contains the code. The form submit however is handled in javascript, with the below code handling the running of the entered script:

try {
    (new Function( jQuery("#code").val() ))();
} catch(e){
    error(e.message);
}

In essence, it's creating a new function using the Function constructor and immediately running it. The assert, log and error functions are normal functions defined elsewhere on the page. Any errors are caught with the catch and passed off to the same error function.

Thank you, didn't thought it was so simple. – gform Feb 11 '15 at 22:25 — gform, Feb 11 '15 at 22:25

Executing JavaScript

2 Answers2