代码预览插件runCode.js

2017-06-23 | 1,337浏览 | 0评论 | 标签:无

2017-8-29更新

今天把这个功能封装成一个插件,取名jquery.runCode.js,方便调用。
[Demo]
[gitHub]

2017-8-29以前内容:

昨天写了一篇关于js对象数组分组的笔记,并做了demo,这种纯js的demo适合在线运行的形式演示,于是写了这个在线运行代码功能。

点红框运行:

code-preview2.jpg

弹出窗口(左侧代码,右侧预览):

code-preview.jpg

实现思路:

抓取目标代码放入左侧<code>标签中(方便代码高亮,这里我用的DlHighlight)。右侧为iframe,编辑完成后点击顶部运行按钮,将<code>中的内容全部document.write到iframe中即可。注意特殊字符转义,且不要使用innerHTML方式写入iframe。

试试下面的代码:

<style>
    h1{color:green;}
</style>

<h1>hello~</h1>

<script>
    document.write('DH');
</script>
(本篇完。欢迎留言探讨, 或打赏支持。)

添加评论 (已启用人工审核)

打赏
编辑代码 运行结果
退出