자바 스크립트를 textarea에서 실행하십시오.

Question

이것이 가능한지 확실하지 않지만 브라우저에서 페이지에 javascript를 실행하는 미니 가짜 편집기를 만들려고합니다. 여기에 내가 이론적으로 할 노력했습니다 무엇

HTML

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

자바 스크립트 내가 입력 한 '코드'를 통해 캔버스 요소에 쓰기를 시도하고 더 구체적으로

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

function run() { 
    return cnsl.value 
} 

예를 들어, ctx.fillRect (10,10,10,10); 내 textarea에 넣은 다음 run() 함수를 실행하면 10x10 사각형이 내 캔버스에 나타납니다.

cnsl.value를 반환하는 대신 내 HTML의 빈 스크립트 요소 innerHTML에 쓸 때 약간의 행운이있었습니다. 하지만이 기능을 처음 실행할 때만 작동하고 페이지를 새로 고칠 때까지 다시 작동하지 않습니다. (예 : http://jsfiddle.net/ur5KC/1/은 jsfiddle에서는 작동하지 않지만 위에서 설명한대로 로컬에서 작동합니다.)

... 어떤 아이디어 ??? 사전에 thnx!

Answer 1

스크립트 요소를 생성하고 실행할 스크립트에 text (또는 textContent, HTML5와 DOM 3이 호환되는 경우)을 설정 한 다음 문서에 삽입 할 수 있습니다. 당신이 갈 때 엘리먼트를 제거하는 것이 최상이므로 많은 (쓸데없는) 스크립트 엘리먼트로 끝나지 않는다. HTML5에서, 각 script element가 실행되고 있는지 여부 나타내는 관련 플래그를 가지고 있으며 한 번만 실행 할 수 있기 때문에 새로운 요소를 작성해야합니다

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

참고. 내용을 바꾸어도 플래그가 재설정되지 않고 복제 된 스크립트 요소는 복제 된 요소의 설정을 유지합니다.

일부 HTML :

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

문서를 파괴 할 수 있습니다 자신의 스크립트를 실행하는 사용자를 장려하지만 내가 추측 당신의 문제입니다. :-)

대안은 위의 (하지만 훨씬 덜 코드)에 더 많거나 적은 동등한 단순히 eval가 입력 무엇이든, 그것은 것입니다 :

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

Answer 2

JavaScript에서 작동하지만 다른 언어에서도 작동하는지 확실하지 않은 경우 텍스트 영역에 스크립트를 가져 와서 텍스트 영역에서 작업을 수행하려는 경우 가져온 스크립트의 메소드를 호출하십시오 실행하고자하는 코드가있는 코드

Answer 3

Thnx @Prodigy & & @JayC!

같은 간단한 해결책은, 나는 그런 기능() 함수가 속임수를 썼는지 평가 후면을 사용 :

을 존재 몰랐다!

HTML

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