9

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

HTML

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

javascript

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では機能しないようですが、上記で説明したようにローカルで機能します）

...何か案は？？？事前にt​​hnx！

4

3 に答える 3

16

スクリプト要素を作成し、そのテキスト（または、HTML5とDOM 3と互換性がある場合は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では、各スクリプト要素に実行されたかどうかを示すフラグが関連付けられており、実行できるのは1回だけであるため、新しい要素を作成する必要があることに注意してください。コンテンツを置き換えてもフラグはリセットされず、複製されたスクリプト要素は、複製元の要素の設定を保持します。

一部のHTML：

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

ユーザーに独自のスクリプトを実行するように促すと、ドキュメントが破壊される可能性がありますが、それが問題だと思います。:-)

別の方法は、入力するものを単純evalにすることです。これは、上記とほぼ同等です（ただし、コードははるかに少なくなります）。

function run() {
  var el = document.getElementById('cnsl');
  el && eval(el.value);
}
于 2012-11-06T03:10:55.073 に答える
6

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();​
于 2012-11-06T03:21:17.707 に答える
0

これがJavaScriptで機能するかどうかはわかりませんが、他の言語でも機能します。スクリプトをテキスト領域のあるスクリプトにインポートしてみてください。テキスト領域でアクションを実行する場合は、インポートされたスクリプトのコードを含むメソッドを呼び出します。実行したい

于 2012-11-06T02:46:33.813 に答える