是否可以解释放置在html标记内的javascript代码？

Question

我想用HTML来记录算法.这将是一个本地文件,因此没有任何安全问题.

我们的想法是拥有一个<pre>包含javascript代码的标签.然后,当加载页面时,<canvas>将根据代码内容呈现元素,必须对其进行评估.

我相信这会使用某种形式的eval()的的innerHtml的的属性<pre>标签,但我不知道.

Answer 1

您确实可以在<pre>使用中运行代码innerHTML来获取代码然后eval().我已经contenteditable为我们添加了HTML5 属性,<pre>因此我们可以像编辑它一样编辑它<textarea>.

的jsfiddle

HTML

<pre id="code" contenteditable>var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(10,10);
context.lineTo(40,40);
context.stroke();</pre>
<button id="run">Run</button>
<canvas width="400" height="300" id="canvas"></canvas>

JavaScript的

var button = document.getElementById('run');
button.onclick = function () {
    var code = document.getElementById('code').innerHTML;
    eval(code);
};