javascript da textarea

Question

Non sono del tutto sicuro che sia possibile, ma sto cercando di creare un mini editor di faux in un browser che esegue javascript sulla pagina. Ecco quello che ho cercato di fare in teoria

HTML

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

javascript

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

function run() { 
    return cnsl.value 
} 

più specificamente Sto cercando di scrivere in un elemento canvas tramite il 'codice' di tipo I nell'area di testo, in modo che se, ad esempio, io scrivo ctx.fillRect (10,10,10,10); nella mia textarea e poi eseguo la funzione run() che il quadrato 10x10 apparirà nella mia tela.

Ho avuto un po 'di fortuna quando invece di restituire il valore cnsl.value l'ho scritto nel innerHTML di un elemento di script vuoto nel mio HTML. Ma funzionerebbe solo la prima volta che eseguirò la funzione e poi non funzionerà più finché non avrò aggiornato la pagina. (per esempio questo: http://jsfiddle.net/ur5KC/1/ che non sembra funzionare su jsfiddle ma funziona localmente come ho descritto sopra)

... qualche idea ??? grazie in anticipo!

Answer 1

È possibile creare un elemento di script, impostarne text (o textContent se compatibile con HTML5 e DOM 3) per lo script da eseguire, quindi inserirlo nel documento. Meglio rimuovere gli elementi mentre si va così non si finisce con un gran numero di elementi di script (inutili).

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

Si noti che è necessario creare un nuovo elemento perché in HTML5, ogni script element ha un flag associato per indicare se è stato eseguito e può essere eseguita una sola volta. La sostituzione del contenuto non reimposta il flag e un elemento script clonato mantiene l'impostazione dell'elemento da cui è stato clonato.

Alcuni HTML:

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

Incoraggiare un utente di eseguire i propri script può distruggere il documento, ma questo è il vostro problema credo. :-)

Un'alternativa è quella di semplicemente eval quello che entrano, è più o meno equivalente a quanto sopra (ma un codice molto meno):

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

Answer 2

Non sono sicuro se questo funzionerà in JavaScript ma funziona in altre lingue, prova a importare lo script nello script che ha l'area di testo poi, quando si vuole fare l'azione nell'area di testo chiamare il metodo nello script importato che ha il codice che si desidera eseguire

Answer 3

Thnx @Prodigy & & @JayC !!!

una soluzione così semplice, non sapevo esistesse una tale funzione :)

utilizzando la funzione eval() ha fatto il trucco !!!

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();​