在线免费 HTML 预览工具

源码资源网

在线免费 HTML 预览工具

有时候用手机查阅资料时，获取到一段 html 代码，但是无法查看对应的实际效果。

特别是苹果系统，没啥简单的方法，于是就想着自己实现一个，直接预览页面的效果。

1. <textarea id="html-input" placeholder="请输入HTML代码..."></textarea>
   
2. 
   
3. <button onclick="updatePreview()">预览</button>
   
4. 
   
5. <div class="preview-pane">
   
6.     <iframe id="preview-frame"></iframe>
   
7. </div>
   
8. 
   
9. function updatePreview() {
   
10.     const input = document.getElementById('html-input').value;
    
11.     const iframe = document.getElementById('preview-frame');
    
12.     iframe.srcdoc = input;
    
13. }

复制代码