从 textarea 执行 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13243563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
execute javascript from textarea
提问by Nick
I'm not entirely sure if this is possible, but I'm trying to create a mini faux editor in a browser that runs javascript on the page. Here's what I've been trying to do in theory
我不完全确定这是否可行，但我正在尝试在页面上运行 javascript 的浏览器中创建一个迷你人造编辑器。这就是我在理论上一直在尝试做的事情
HTML
HTML
?<textarea id="cnsl"></textarea>
<button onclick="run()"> run </button>
javascript
javascript
var cnsl = document.getElementById('cnsl');
function run() {
return cnsl.value
}
more specifically I'm trying to write to a canvas element via the 'code' I type into the text area, so that if, for example, i type ctx.fillRect(10,10,10,10); into my textarea and then execute that run() function the 10x10 square will appear in my canvas.
更具体地说，我试图通过在文本区域中键入的“代码”写入画布元素，例如，如果我键入 ctx.fillRect(10,10,10,10); 进入我的文本区域，然后执行该 run() 函数，10x10 的正方形将出现在我的画布中。
I had a little luck when instead of returning the cnsl.value I wrote it to the innerHTML of an empty script element in my HTML. But this would only work the first time I'd execute the function and then won't work again until I refresh the page. (for example this: http://jsfiddle.net/ur5KC/1/which doesn't seem to work on jsfiddle but works locally as I described above)
当我没有将 cnsl.value 返回到我的 HTML 中一个空脚本元素的 innerHTML 而不是返回 cnsl.value 时，我有一点运气。但这只会在我第一次执行该函数时起作用，然后在我刷新页面之前不会再次起作用。（例如：http: //jsfiddle.net/ur5KC/1/似乎在 jsfiddle 上不起作用，但如我上面描述的那样在本地工作）
...any ideas??? thnx in advance!
...有任何想法吗？？？提前谢谢！
回答by RobG
You can create a script element, set its text(or textContentif HTML5 and DOM 3 compatible) to the script to execute, then insert it in the document. Best to remove elements as you go so you don't end up with a large number of (useless) script elements.
您可以创建一个脚本元素，将其文本（或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);
}
Note that you must create a new element because in HTML5, each script elementhas an associated flag to indicate whether it's been executed and it can only be executed once. Replacing the content doesn't reset the flag, and a cloned script element keeps the setting of the element it was cloned from.
请注意，您必须创建一个新元素，因为在 HTML5 中，每个脚本元素都有一个相关联的标志来指示它是否已执行，并且只能执行一次。替换内容不会重置标志，克隆的脚本元素会保留从其克隆的元素的设置。
Some HTML:
一些 HTML：
<textarea id="cnsl"></textarea>
<button onclick="run();">run</button>
Encouraging a user to execute their own scripts may destroy the document, but that's your problem I guess. :-)
鼓励用户执行他们自己的脚本可能会破坏文档，但我猜这是你的问题。:-)
An alternative is to simply evalwhatever they enter, it's more or less equivalent to the above (but a lot less code):
另一种方法是简单地eval输入任何内容，它或多或少与上述相同（但代码少得多）：
function run() {
var el = document.getElementById('cnsl');
el && eval(el.value);
}
回答by Nick
Thnx @Prodigy && @JayC !!!
谢谢@Prodigy && @JayC !!!
such a simple solution, I did not know such a function existed :)
如此简单的解决方案，我不知道存在这样的功能:)
using the eval() function did the trick!!!
使用 eval() 函数成功了！！！
HTML
HTML
<textarea id="cnsl"></textarea>
<button onclick="run()"> run </button>
<canvas id="canvas" width="200" height="200"></canvas>
javascript
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();?
回答by hubbardh
Not sure if this will work in JavaScript but it works in other languages, try importing your script into the script that has the text area then when you want to do the action in the text area call the method in the imported script that has the code you want to execute
不确定这是否适用于 JavaScript 但它适用于其他语言，请尝试将您的脚本导入具有文本区域的脚本，然后当您想在文本区域中执行操作时调用具有代码的导入脚本中的方法你想执行
