W3C上面的运行代码按钮

W3C上面的运行代码按钮

文章内容的主要结构如下

• 我和W3C
• 代码的实时预览
• 实现原理
• 挑战编辑
• 总结

---

我和W3C

对于开发者尤其是急性子的开发者，有时候想要查找并验证某个前端属性的效果 必须要先自己写一个html，然后copy一堆七七八八的东西进去 才可以打开浏览器愉快的进行调试（当然现在有很多网站有实时预览的效果）。
7月份刚来公司 开始接触前端的时候 每天疯狂百度各种css，当然最常去的就是W3C，它给我影响最深的也就是按个可以实时运行的按钮，思广议的说，然后就想自己也搞一个可以类似的东西出来玩。偶尔在知乎上看到，这东西也可以自己DIY。而且这需求在前端也是非常 常见的。

代码的实时预览

在某些博客或者功能网站上面，都有‘运行’按钮，点击之后就会显示代码的效果，有些是开发者封装了大部分代码，然后暴露一些核心代码或者配置属性供游客DIY，我么这里只讨论js、css、html实现的简单前端效果预览。
网上流传的传统做法是，用iframe或者新建一个窗口出来做‘功能组件’ 接收并显示传如的代码，其中可能还会设计到H5的新特性postMessage。如果我们想实现一个简单的，只是显示固定的代码效果，不让用户进行编辑，就可以不用新建新窗口，可以直接在当前页面构建一个文档上下文，简单快捷。

实现原理

核心步