手腕舟状骨骨折手术后第一篇文章-HTML5 blob实现JS,CSS,HTML当页预览

前言

今天教师节，祝老师们节日快乐。这篇文章是我手术之后的第一篇文章，全篇文章用左手打字，望大家原谅！

手术

去年打篮球摔倒，一直以为没有问题，也一直没有去医院检查。但是半年过去了，手腕部一直疼痛，医院拍片之后，说是手腕舟状骨骨折，这个骨折相当麻烦。由于是陈旧骨折，需要做手术才能完全康复！9月4号，周一入住华山医院，9月6号周三做手术。 简单说一下我手术的体验。 由于我是整个手臂的麻醉，打完麻药，我感觉我的手臂不是我自己的了。整个手术耗时三个多小时，在此我要感谢 虞聪和 陈琳两位教授精湛的手法。手术过程中我是有意识的，只听到两位教授在不停的讨论，只是感觉他们在撬动我的骨头。就像用锤子在击打。 整个过程虽然没有疼痛，但是一直在煎熬。

在此，忠告大家，好好保重身体，摔打及时检查！

HTML5 blob实现JS,CSS,HTML直接当前页预览

术后闲看，看到张鑫旭大神写的iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览，之前还真没这么用过，简单测试了一下，还蛮好用。

例如下面代码：

    div.haorooms {
      position: absolute; top: 50px; left: 50px;
      -webkit-animation: clockwise 2.5s linear infinite; animation: clockwise 2.5s linear  infinite ;
      transform-origin: 70px 70px;
    }

.haorooms   em {
        display: block;
        width: 40px; height: 40px;
        background: red;
          color:000;
        -webkit-animation: counter-clockwise 2.5s linear infinite; animation: counter-clockwise 2.5s linear  infinite ;
    }

    @-webkit-keyframes clockwise{
      0%  { -webkit-transform: rotate(0deg) ;  }
      100%{ -webkit-transform: rotate(360deg); }
    }

    @keyframes clockwise {
      0%  { transform: rotate(0deg) ; }
      100%{ transform: rotate(360deg); }
    }

    @-webkit-keyframes counter-clockwise {
      0%  { -webkit-transform: rotate(360deg) ;  }
      100%{ -webkit-transform: rotate(0deg); }
    }

    @keyframes counter-clockwise {
      0%  { transform: rotate(360deg) ;  }
      100%{ transform: rotate(0deg); }
    }

核心原理：

1、创建iframe元素；

2、将CSS，HTML字符串转换为Blob对象；

3、使用URL.createObjectURL()方法将Blob对象转换为URL对象并赋予我们创建的iframe元素的src属性；

核心js如下：

// 1. 创建iframe元素
var iframe = document.createElement('iframe');
// 2. 将CSS，HTML字符串转换为Blob对象
var blob = new Blob([htmlCode], {
  'type': 'text/html'
});
// 3. 使用URL.createObjectURL()方法将...
iframe.src = URL.createObjectURL(blob);