我不完全确定这是否可行,但我正在尝试在浏览器中创建一个迷你虚拟编辑器,在页面上运行
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);进入我的textarea,然后执行run()函数,10×10 square将出现在我的画布中.
我有点运气,而不是返回cnsl.value我把它写入HTML中空脚本元素的innerHTML.但这只会在我第一次执行该函数时起作用,然后在刷新页面之前不会再次工作. (例如:http://jsfiddle.net/ur5KC/1/,它似乎不适用于jsfiddle但在本地工作,如上所述)
…有任何想法吗??? thnx提前!
解决方法
您可以创建一个脚本元素,将其
text(如果HTML5和DOM 3兼容,则为
textContent)设置为要执行的脚本,然后将其插入文档中.最好在你去的时候删除元素,这样你就不会得到大量(无用的)脚本元素.
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>
鼓励用户执行自己的脚本可能会破坏文档,但我认为这是你的问题. 原文链接:/js/155558.html