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

Question

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

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

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

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