javascriptをtextareaから実行する

Question

これが可能かどうかは完全にはわかりませんが、私はページ上でjavascriptを実行するブラウザにmini fauxエディタを作成しようとしています。ここで私は理論的にやろうとしていたものだ

HTML

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

javascriptの私はタイプ「コード」を介してcanvas要素への書き込みをしようとしているより具体的に

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

function run() { 
    return cnsl.value 
} 

例えば、私がctx.fillRect（10,10,10,10）と入力すると、私のテキストエリアに入力してrun（）関数を実行すると、10x10の四角形がキャンバスに表示されます。

cnsl.valueを返す代わりに、私はHTMLの空のスクリプト要素のinnerHTMLに書きました。しかし、これは最初に関数を実行してから、ページを更新するまでは機能しません。 （例：http://jsfiddle.net/ur5KC/1/はjsfiddleでは動作しないようですが、上記のようにローカルで動作します）

...任意のアイデア??? thnxを事前に！

Answer 1

スクリプト要素を作成し、実行するスクリプトに対してtext（またはHTML5とDOM3互換の場合はtextContent）を設定して、文書に挿入することができます。多くの（無駄な）スクリプト要素で終わらないように要素を削除するのがベストです。

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

HTML5に、各script elementは、それが実行されていますし、それが一度だけ実行できるかどうかを示すために、対応するフラグを持っているので、あなたが新しい要素を作成する必要があります。コンテンツを置き換えてもフラグはリセットされず、複製されたスクリプト要素は複製された要素の設定を保持します。

いくつかのHTML：

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

が独自のスクリプトを実行するユーザーを奨励、文書を破壊するかもしれないが、それは私が推測するあなたの問題です。 :-)

代替は、彼らが入るものは何でも、単にevalあり、それは上記の（しかし、はるかに少ないコード）に、多かれ少なかれ同等だ：

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

Answer 2

これがJavaScriptで動作するのかどうかはわかりませんが、他の言語でも動作するのかどうかわからない場合は、テキスト領域にスクリプトをインポートしてから、テキスト領域でアクションを実行するときは、あなたが実行したいコードを持っている

Answer 3

のthnx @Prodigy & & @JayC！

このような単純な解決策、私はそのような機能は、トリックをしたのeval（）関数を使用して:)

を存在を知りませんでした！

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