execute javascript von textarea

Question

Ich bin mir nicht ganz sicher, ob das möglich ist, aber ich versuche, einen Mini-Faux-Editor in einem Browser zu erstellen, der Javascript auf der Seite ausführt. Hier ist, was ich in der Theorie

HTML

​<textarea id="cnsl"></textarea> 
<button onclick="run()"> run </button> 

Javascript

var cnsl = document.getElementById('cnsl'); 

function run() { 
    return cnsl.value 
} 

insbesondere auf ein Canvas-Element zu tun versucht, ich versuche, über den 'Code' zu schreiben, ich tippe in den Textbereich, so dass, wenn ich zum Beispiel, ctx.fillRect (10,10,10,10); in meine textarea und dann ausführen diese run() funktion das 10x10 quadrat erscheint in meiner leinwand.

Ich hatte ein wenig Glück, wenn ich anstelle der Rückgabe des cnsl.value schrieb ich es auf die innerHTML eines leeren Skriptelements in meinem HTML. Aber das würde nur funktionieren, wenn ich die Funktion zum ersten Mal ausführe und dann erst wieder funktioniere, wenn ich die Seite aktualisiere. (zum Beispiel das: http://jsfiddle.net/ur5KC/1/ die scheint nicht zu funktionieren jsfiddle aber funktioniert lokal wie ich oben beschrieben)

... any ideas ??? Thnx im Voraus!

Answer 1

Sie können ein Skriptelement erstellen, text (oder textContent wenn kompatibel mit HTML5 und DOM 3) zu dem Skript, das ausgeführt werden soll, und es dann in das Dokument einfügen. Am besten entfernen Sie Elemente, während Sie gehen, so dass Sie nicht mit einer großen Anzahl von (nutzlosen) Skriptelementen enden.

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

Beachten Sie, dass Sie ein neues Element erstellen muss, weil in HTML5, jeder script element ein zugehöriges Flag hat, um anzuzeigen, ob es ausgeführt worden ist, und es kann nur einmal ausgeführt werden. Durch das Ersetzen des Inhalts wird das Flag nicht zurückgesetzt, und ein geklontes Skriptelement behält die Einstellung des Elements bei, aus dem es geklont wurde.

Einige HTML:

<textarea id="cnsl"></textarea> 
<button onclick="run();">run</button> 

einen Benutzer zu ermutigen, ihre eigenen Skripts ausführen kann das Dokument zerstören, aber das ist Ihr Problem, denke ich. :-)

Eine Alternative ist, einfach eval, was sie geben, es ist mehr oder weniger äquivalent zu dem oben (aber viel weniger Code):

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

Answer 2

Nicht sicher, ob dies in JavaScript funktioniert, aber es in anderen Sprachen funktioniert. Versuchen Sie, das Skript in das Skript mit dem Textbereich zu importieren, wenn Sie die Aktion im Textbereich ausführen möchten das hat den Code, den Sie ausführen möchten

Answer 3

Thnx @Prodigy & & @JayC !!!

eine solche einfache Lösung, ich wusste nicht, eine solche Funktion :) existierte

die eval() -Funktion der Trick !!!

HTML

<textarea id="cnsl"></textarea> 
<button onclick="run()"> run </button> 
<canvas id="canvas" width="200" height="200"></canvas> 

Javascript

var cnsl = document.getElementById('cnsl'); 

function run() {  
    return eval(cnsl.value); // << did the trick ;) 
} 

//canvas 
var ctx; 

function setup() { 
    var canvas = document.getElementById('canvas'); 
     ctx = canvas.getContext('2d'); 
} 
setup();​