Question

Context:

I am building a live HTML,CSS & Javascript editor.
It can be accessed here.

The source can be accessed here.

Question:

Is it possible to run javascript code injected into an iframe without repeated removal and addition of <script> tag containing the code from and to the DOM tree? Since DOM manipulation is a costly affair, I want to try and eliminate multiple DOM manipulations.
Instead I want to be able to just change the textContent of the <script> tag and have it run the new code that I’ve inserted.

Thanks!

Answer 1

If you don’t mind using the evil eval, you can re-evaluate most JavaScript in the iframe’s window, for example

function someFunction(){                                // any function
    console.log(document.body.children);
}

someFunction();                                         // see normal output

var ifrm  = document.getElementsByTagName('iframe')[0], // your iframe
    iwind = ifrm.contentWindow;                         // the iframe's window

iwind.eval( someFunction.toString() );                  // re-evaluate function with eval from iframe
iwind.someFunction();                                   // see new output - output is in iframe's context

compare against

iwind.someFunction = someFunction;                      // set variable
iwind.someFunction();                                   // same as calling someFunction() from parent

It should work for most valid JavaScript (take into account scope), but be aware that using eval can be bad.