最近在开发一个在线运行 JavaScript 的功能,左边是编辑器,右边是输出窗口,运行的JS由用户自己编写,然后点击运行按钮就将运行的结果显示在右边。在网上找到几个页面动态加入 <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 确是非常简单的解决方案,就是把 <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 属性。
此方法可以在页面上直接输出任何 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 简单,因为 jQuery 的 html() 方法内部已经做了处理,如果参数中含有 <script> 标签,内部会使用 Eval 和创建新节点的方式进行处理,如果是外联的 js 文件,jQuery 会发一个同步的 ajax 请求来获取代码,注意是同步的!所以不论是内联的js代码还是外联的js文件,都可以正常执行,同时在执 行完后删去 <script> 标签。所以使用jQuery你只需要这样:
- var html = '<div>html</div><script>alert(1);<\/script>';
- $('#cont').html(html);
还是 jQuery 的方法简单实用,一行代码全搞定。