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

Question

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

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

我相信这会使用eval()标记的innerHtml属性的某种<pre>，但我不确定。

Answer 1

您确实可以使用<pre>在innerHTML内部运行代码以获取代码，然后eval()。我已将HTML5 contenteditable属性添加到<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);
};