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，但正如我上面描述的那样在本地工作）

...有任何想法吗？？？提前谢谢！

4

3 回答 3

16

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

一些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

谢谢@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 回答