一直觉得Codepen的在线代码预览系统很牛逼。它可以以所见即所得的方式实时显示代码的运行效果。非常方便快捷。就在最近，我手头有一项业务需要使用类似于Codepen的功能。经过一番研究，我开发了一个demo，基本具备在线运行代码的能力。在线体验地址：https://jrainlau.github.io/on...由于业务只需要执行JS代码，所以demo也只有运行JS代码的能力。一、原理我们知道，浏览器是通过自己的引擎来处理html、css和js资源的，处理过程是在页面加载的时候开始的。如果我们想动态运行这些资源，对于html和css可以使用DOM操作，对于js可以使用eval或者newFunction()。但是这些操作复杂且不安全（eval和newFunction()容易出事故），那么有什么方法可以优雅、方便、安全地动态运行呢？让我们看看著名的Codepen是如何做到的。我在Codepen中简单写了一个按钮，绑定了样式和点击事件，可以看到白色区域已经显示了我们想要的结果。打开控制台，全神贯注观察后，我们可以发现，整个白色区域都是一个iframe，里面的html内容就是我们刚刚编辑的代码。不难想象，它的运行原理有点类似于document.write，直接将内容写入html文件，然后以iframe的形式嵌入到其他网页中，实现代码预览的逻辑。那么使用iframe有什么好处呢？iframe可以独立成为一个与宿主机隔离的沙箱环境，运行在其中的代码在大多数情况下不会对宿主机产生影响，可以有效保证安全性。通过HTML5新的sandbox属性，可以为iframe定义更细粒度的权限，比如是否允许运行脚本，是否允许弹窗等等。2.实现方法要实现类似Codepen的效果，最重要的一步就是如何将代码注入到iframe中。由于我们需要使用相关的API来操作iframe，为了安全起见，浏览器只能使用同域的iframe链接，否则会报跨域错误。首先准备一个index.html和iframe.html，使用静态资源服务器来运行它们，假设它们都运行在localhost:8080上。然后我们在index.html中插入一个iframe，它的链接是localhost:8080/iframe.html，代码如下：
