在网页中实时运行 JavaScript 代码 - 文章教程

在网页中实时运行 JavaScript 代码

发布于 2017-09-26 字数 3269 浏览 2720 评论 0

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

在网页中实时运行 JavaScript 代码

重新构造 <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 的方法简单实用,一行代码全搞定。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0