W3C上面的运行代码按钮

W3C上面的运行代码按钮

文章内容的主要结构如下

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

---

我和W3C

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

代码的实时预览

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

实现原理

核心步骤以及演示代码如下如下：

• 创建标签 <iframe> 标签
• 将前端要展示的文件以字符串的方式装换成Blob对象
• 将然后使用URL的 createObjectURL() 方法导出URL对象赋给 <iframe> 的 src 属性

const iframe = document.createElement('iframe')
// 这里有个坑，一定要指定type
const Blob = new Blob([htmlCode], {
  'type': 'text/html'
})
iframe.src = URL.createObjectURL(Blob);

貌似使用Blob 方法的时候，必须指定type为text/html格式（其他MIME type还没测试过），否则iframe只会显示纯文本。

还有一个比较坑的是，IE貌似不支持URL作为src的属性。

挑战编辑

上面介绍的是展示静态的样式代码，其实也可以支持用户编辑 然后运行的功能 如W3C。该功能的主要武器就是HTML5的新特性contenteditable 属性，可以让标签处于可编辑状态，这里就是用它来让<style> 便签处于可编辑状态，然后用户就可以DIY了,
这种方式有个好处，就是连 运行 按钮都可以省略了，直接实时显示样式。
如果只是想暴露某些文件的<style> 标签给用户编辑，可以使用css的选择器控制，具体见W3C。

总结

还有一个小坑可以踩、

• 响应式布局中的坑
  如media只有在分辨率出现变化的时候才会触发，所以可以使用 <iframe> 并且把宽度定死
• 对于IE的 contenteditable
  虽然IE支持该属性，但是 <style> 没法显示，所以无法实现编辑功能，如果非要实现 可以使用js粗暴的实现