我不完全确定这是否可能,但我正在尝试在浏览器中创建一个在页面上运行 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,10);进入我的文本区域,然后执行 run() 函数,10x10 的正方形将出现在我的画布中。
我很幸运,没有返回 cnsl.value,而是将其写入 HTML 中空脚本元素的innerHTML。但这只会在我第一次执行该函数时起作用,然后在刷新页面之前不会再次起作用。 (例如这个:http://jsfiddle.net/ur5KC/1/这似乎不适用于 jsfiddle 但可以在本地工作,如上所述)
...有任何想法吗???提前致谢!
您可以创建一个脚本元素,设置其text (or 文本内容如果 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);
}
<textarea id="cnsl"></textarea>
<button onclick="run();">run</button>
请注意,您必须创建一个新元素,因为在 HTML5 中,每个脚本元素有一个关联的标志来指示它是否已被执行,并且只能执行一次。替换内容不会重置标志,并且克隆的脚本元素会保留其克隆来源的元素的设置。
鼓励用户执行自己的脚本可能会破坏文档,但我想这就是您的问题。 :-)
另一种方法是简单地eval无论他们输入什么,它或多或少与上面的相同(但代码少了很多):
function run() {
var el = document.getElementById('cnsl');
el && eval(el.value);
}
<textarea id="cnsl"></textarea>
<button onclick="run();">run</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)