在网页中实时运行 JavaScript 代码

Question

最近在开发一个在线运行 JavaScript 的功能，左边是编辑器，右边是输出窗口，运行的JS由用户自己编写，然后点击运行按钮就将运行的结果显示在右边。在网上找到几个页面动态加入 <script> 标签并执行代码的方法，分享给大家。

重新构造 <script> 标签

这个思路其实非常简单，用 innerHTML 添加的 <script> 无法执行，但是我们 script 创建节点，并用 appendChild 追加上去是可以的，所以我们只需要做一下二次工作就可以了，看下面的例子：

<div id="cont"></div>

var html = '<div>html</div><script>alert(1);<\/script>';
var cont = document.getElementById('cont');
cont.innerHTML = html;
var oldScript = cont.getElementsByTagName('script')[0];
cont.removeChild(oldScript);
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.innerHTML = oldScript.innerHTML;
cont.appendChild(newScript);

这只是内联 <script> 的方法，如果是引用的外部 js 文件，那么我们需要为新创建的 script 节点指定 src 属性。

Eval 大法

虽然 Eval 因为其安全性不推荐使用，但是在此特殊场景，使用 Eval 确是非常简单的解决方案，就是把 <script> 标签中的代码Eval一下手动执行就可以了，请看下面代码：

var html = '<div>html</div><script>alert(1);<\/script>';
var cont = document.getElementById('cont');
cont.innerHTML = html;
var oldScript = cont.getElementsByTagName('script')[0];
cont.removeChild(oldScript);
var scriptText = oldScript.innerHTML;
eval(scriptText);

对于内联的代码，简单而有效，如果是外部 js 文件，那么还是使用上面的方法，为新创建的 script 节点指定 src 属性。

document.write 大法

此方法可以在页面上直接输出任何 html 内容，包含 <script> 标签的话会立即执行，所以也是一种方案，如下：

var html = '<div>html</div><script>alert(1);<\/script>';
document.write(html);

代码就直接执行了。但是他的缺点是如果代码写在文档底部，输出的内容会把页面上的其他内容全部覆盖，相当于清空了页面。解决的办法只有这样了：

<div id="cont">
<script type="text/javascript">
document.write(html);
</script>
</div>

直接把它放在标签中，就会往这个标签中输出东西了。

使用 jQuery 的 html()

上面的方法说来说去，都不如 jQuery 简单，因为 jQuery  的 html() 方法内部已经做了处理，如果参数中含有 <script> 标签，内部会使用 Eval 和创建新节点的方式进行处理，如果是外联的  js 文件，jQuery 会发一个同步的 ajax 请求来获取代码，注意是同步的！所以不论是内联的js代码还是外联的js文件，都可以正常执行，同时在执 行完后删去 <script> 标签。所以使用jQuery你只需要这样：

var html = '<div>html</div><script>alert(1);<\/script>';
$('#cont').html(html);

还是 jQuery 的方法简单实用，一行代码全搞定。