从textarea执行javascript

Question

我不完全确定这是否可行,但我正在尝试在浏览器中创建一个迷你虚拟编辑器,在页面上运行javascript.这是我在理论上一直在努力做的事情

HTML

?<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); 进入我的textarea,然后执行run()函数,10x10 square将出现在我的画布中.

我有点运气,而不是返回cnsl.value我把它写入HTML中空脚本元素的innerHTML.但这只会在我第一次执行该函数时起作用,然后在刷新页面之前不会再次工作.(例如:http://jsfiddle.net/ur5KC/1/,它似乎不适用于jsfiddle,但如上所述在本地工作)

...有任何想法吗？？？thnx提前!

Answer 1

您可以创建一个脚本元素,将其文本(或者与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中,每个脚本元素都有一个关联的标志,用于指示它是否已执行且只能执行一次.替换内容不会重置标志,并且克隆的脚本元素将保留从中克隆的元素的设置.

一些HTML:

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

鼓励用户执行自己的脚本可能会破坏文档,但我认为这是你的问题.:-)

另一种方法是简单地eval输入它,它或多或少等同于上面的(但代码少得多):

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

Answer 2

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