2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

在网页中实时运行 JavaScript 代码

时间:12-14来源:作者:点击数:18

最近在开发一个在线运行 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 的方法简单实用,一行代码全搞定。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐