execute javascript from textarea

Question

I\'m not entirely sure if this is possible, but I\'m trying to create a mini faux editor in a browser that runs javascript on the page. Here\'s what I\'ve been trying to do

Answer 1

You can create a script element, set its text (or textContent if HTML5 and DOM 3 compatible) to the script to execute, then insert it in the document. Best to remove elements as you go so you don't end up with a large number of (useless) script elements.

function run() {
    var el = document.getElementById('cnsl');
    var scriptText = el.value;
    var oldScript = document.getElementById('scriptContainer');
    var newScript;

    if (oldScript) {
      oldScript.parentNode.removeChild(oldScript);
    }

    newScript = document.createElement('script');
    newScript.id = 'scriptContainer';
    newScript.text = el.value;
    document.body.appendChild(newScript);
} 

Note that you must create a new element because in HTML5, each script element has an associated flag to indicate whether it's been executed and it can only be executed once. Replacing the content doesn't reset the flag, and a cloned script element keeps the setting of the element it was cloned from.

Some HTML:

run

Encouraging a user to execute their own scripts may destroy the document, but that's your problem I guess. :-)

An alternative is to simply eval whatever they enter, it's more or less equivalent to the above (but a lot less code):

function run() {
  var el = document.getElementById('cnsl');
  el && eval(el.value);
}