今天來做一個即時預覽的效果。
使用html5 blob 、iframe
demo中按下按鈕就會執行github gist裡面嵌入的內容。
步驟 1 ：建立
步驟 2 : html、css字符串轉為blob
步驟 3 ：用URL.createObjectURL() 將blob轉為URL並給src屬性
var iframe = document.createElement('iframe');
var blob = new Blob([htmlCode], {
'type': 'text/html'
//用document.getElementById('codeArea').value取到內容
});
iframe.src = URL.createObjectURL(blob);
//把blob 丟到這邊來轉為URL
這個要用在哪裡...大概是在網頁中內容想穿插一個即時的效果展示，但又不想因此多新增一頁的時候。
iThome鐵人賽
看影片追技術