blob html 预览_iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览
這篇文章發布于 2017年08月24日，星期四，01:09，歸類于 js實例。 閱讀 1755 次, 今日 1350 次
一、關于前端代碼效果實時預覽
前端代碼效果實時預覽的需求實際上是非常常見的，例如jsbin，codepen，runjs之類的網站就是滿足此需求的。這些站點可以方便快捷的讓我們測試一些前端屬性的作用和表現，還可以制作可編輯可分享的在線demo，遇到棘手或者不明白問題的時候，給對方一個這樣的在線demo地址是最友好的做法。
當然需求場景還不止這些，比方說我們制作一些工具，例如類似玉兔這樣的H5制作工具，就有能夠實時預覽最終效果的需求。又或者說我們寫技術文章的時候，文章里面嵌入的源代碼，希望可以直接跑起來。
傳統做法是這樣子的，會新建一個另外的獨立頁面，專門用來接收傳入的前端代碼，通過新開窗口或者嵌入iframe頁面的方式達到最終效果，其中可能會用到HTML5 postMessage等通信技術。
然而實際上，對于這個預覽效果，如果代碼是我們自己控制，而不是全權交給用戶編輯的，是沒有必要新建一個另外的預覽頁面，亦或者是在新窗口(新標簽頁)中瀏覽的。可以直接在當前頁面構建一個文檔上下文，實現更加方便快捷的預覽。
二、借助iframe和blob實現前端代碼的實時預覽
我們直接看一個例子(如果沒有效果，請前往文章原出處體驗)，如下CSS和HTML代碼(純CSS實現了一個水波蕩漾的效果)：
html {
height: 100vh;
}
body {
height: inherit;
background: #2e576b;
display: -ms-grid;
display: grid;
}
.container {
margin: auto;
}
.card {
position: relative;
width: 300px; height: 350px;
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 15px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.card::after {
content: '';
display: block;
width: 100%; height: 100%;
background: linear-gradient(to bottom, #0065a8, rgba(221, 238, 255, 0.4) 46%, rgba(255, 255, 255, 0.5));
}
.wave {
position: absolute;
top: 3%; left: 50%;
width: 400px; height: 400px;
margin-top: -200px; margin-left: -200px;
background: #0af;
border-radius: 40%;
opacity: .4;
animation: shift 3s infinite linear;
}
.wave.w2 {
background: yellow;
opacity: .1;
animation: shift 7s infinite linear;
}
.wave.w3 {
animation: shift 5s infinite linear;
background: crimson;
opacity: 0.1;
}
@-webkit-keyframes shift {
from {
transform: rotate(360deg);
}
}
@keyframes shift {
from {
transform: rotate(360deg);
}
}
點擊代碼演示區域右上角或右下角的運行按鈕，此時這段代碼的效果就干干凈凈(不受當前頁CSS，JS干擾)地在當前頁面顯示了(點擊頁面空白區域隱藏)。
點擊后頁面截圖如下：
核心原理：
此效果實現的核心原理是：
創建元素；
將CSS，HTML字符串轉換為Blob對象；
使用URL.createObjectURL()方法將Blob對象轉換為URL對象并賦予我們創建的元素的src屬性；
使用JavaScript代碼表示更加一目了然：
// 1. 創建元素
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);
需要注意的是，當我們使用 new Blob() 對我們的字符數據進行轉換的時候，一定要指定type為text/html，否則，HTML代碼會被自動轉移為安全的純文本顯示在元素中。
兼容性
IE瀏覽器遺憾并不支持src直接是URL對象。
所以此技術只適用于對兼容性沒有嚴格要求的一些項目。
三、結束語
其實很多效果，我們直接在結束當前頁面的window上下文預覽也沒什么，但是有一些效果就不行，例如，預覽針對響應式布局的media屏幕寬度查詢下的效果，必須是真實的窗體寬度才會觸發CSS查詢語句的執行，此時，只能在中預覽，我們只要把元素寬度設置到我們需要的大小就可以了，例如，需要預覽類似如下CSS代碼效果：
@media screen and (max-width:480px) {
img { max-width: 100%; }
}
只要設置元素寬度為480像素就可以了。
以上就是本文內容，希望能對你的項目開發有所幫助。
感謝閱讀！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址：http://www.zhangxinxu.com/wordpress/?p=6368
(本篇完)
分享到：
總結
以上是生活随笔為你收集整理的blob html 预览_iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c++ fstream用得多不?_自动挡
- 下一篇： fillstyle属性_HTML can