从textarea执行javascript [英] execute javascript from textarea

问题描述

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

HTML

 < textarea id =cnsl>< / textarea> 
< button onclick =run（）>运行< / button> 
  

javascript

  var cnsl = document.getElementById（'cnsl'）; 
 
 function run（）{
 return cnsl.value 
} 
  

更具体地，我试图通过'code'I类型写入一个canvas元素到文本区域，所以如果，例如，我键入ctx.fillRect（10,10,10,10） ;进入我的textarea然后执行run（）函数10x10平方将出现在我的画布上。

我有一点运气，而不是返回cnsl.value我写到HTML的空脚本元素的innerHTML。但这只会工作，我第一次执行该函数，然后将不会再工作，直到我刷新页面。 （例如： http://jsfiddle.net/ur5KC/1/ 工作在jsfiddle但工作在本地，如上所述）

...任何想法？

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

  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）; 
} 
  

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

HTML

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

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.

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)

...any ideas??? thnx in advance!

解决方案

You can create a script element, set its text (or textContent if 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.

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 element has 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.

Some 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 eval whatever they enter, it's more or less equivalent to the above (but a lot less code):

function run() {
  var el = document.getElementById('cnsl');
  el && eval(el.value);
}

这篇关于从textarea执行javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！