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

Question

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

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

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

Answer 1

您确实可以在<pre>using中运行代码innerHTML以获取代码，然后eval(). 我已经将 HTML5contenteditable属性添加到我们的<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);
};