从textarea执行javascript

我不完全确定这是否可行，但我正在尝试在一个在页面上运行javascript的浏览器中创建一个迷你人造编辑器。这是我在理论上一直试图做的

HTML

更具体地说，我试图通过我在文本区域中键入的“code”来写入画布元素，例如，如果我键入ctx.fillRect（10,10,10,10）；进入我的文本区域，然后执行run（）函数，10x10正方形将出现在我的画布中

幸运的是，我没有返回cnsl.value，而是将其写入HTML中空脚本元素的innerHTML中。但这只会在我第一次执行函数时起作用，然后在刷新页面之前不会再次起作用。（例如：它似乎不适用于JSFIDLE，但可以在本地工作，正如我前面所述）

---

…有什么想法吗？？？提前通知

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

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

一些HTML：

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

---

Thnx@Prodigy&&@JayC

这么简单的解决方案，我不知道有这么一个函数：）

使用eval（）函数成功了

HTML

跑

javascript

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

function run() {
    return cnsl.value
}

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

var cnsl=document.getElementById（'cnsl'）；
函数run（）{
return eval（cnsl.value）；//eval函数将帮助您：……尽管对于第一个方法，更好的链接应该是++。它可以被修改以适用于许多不同的场景；我使用了一些类似的代码在iframe中执行用户编写的JavaScript。我做的有点不同，不过-我有一个单独的div，id=“script”，我将脚本元素放在div中。为了防止脚本元素累积，每次添加新脚本时，我只需清除div的innerHTML。太危险了。如果没有任何清理，你就无法执行用户在输入字段中键入的任何代码；如果你的站点严重依赖JS，脚本注入总是一个很大的风险。@FranVerona用户已经可以在网页中运行他们想要的任何脚本，这不会暴露出任何新的弱点。如果你的web应用程序无法处理这一点，那么它就有一些问题。嘿，2020年及以后的人物。。应该注意，
eval（）
使用起来有潜在危险！
function run() {
  var el = document.getElementById('cnsl');
  el && eval(el.value);
}

<textarea id="cnsl"></textarea>
<button onclick="run()"> run </button>
<canvas id="canvas" width="200" height="200"></canvas>

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