从 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);进入我的文本区域，然后执行 run() 函数，10x10 的正方形将出现在我的画布中。

我没有返回 cnsl.value，而是将其写入 HTML 中空脚本元素的 innerHTML 时，我有点幸运。但这只会在我第一次执行该功能时起作用，然后在我刷新页面之前不会再次起作用。 （例如：http://jsfiddle.net/ur5KC/1/ 这似乎不适用于 jsfiddle，但正如我上面描述的那样在本地工作）

...有什么想法吗？？？提前谢谢！

Answer 1

您可以创建一个脚本元素，将其text（或textContent，如果HTML5 和DOM 3 兼容）设置为要执行的脚本，然后将其插入到文档中。最好在执行过程中删除元素，这样您就不会得到大量（无用的）脚本元素。

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

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

Answer 3

不确定这是否适用于 JavaScript，但它适用于其他语言，尝试将您的脚本导入到具有文本区域的脚本中，然后当您想在文本区域中执行操作时调用导入脚本中的方法有你要执行的代码