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

您可以创建一个脚本元素，将其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

Thnx @Prodigy＆amp;＆amp; @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，但它适用于其他语言，尝试将脚本导入到具有文本区域的脚本中，然后当您要在文本区域中执行操作时，请在导入的脚本中调用该方法有你想要执行的代码

从textarea执行javascript

3 个答案: