HTML在线预览工具是很多学习平台和开发工具站的基础功能，比如CodePen、JSFiddler这类网站，本质上都是让用户在编辑器里写代码，然后在旁边的小窗口里实时看到渲染结果。这篇文章就来拆解这个功能的实现原理，从最基础的iframe渲染讲起，一步步做出一个支持HTML、CSS、JavaScript三段代码实时预览的工具。
一、整体思路与页面结构搭建
先明确一下我们要做什么：页面上有一个代码编辑区域，用户可以输入HTML结构、CSS样式和JavaScript脚本；旁边有一个预览区域，代码发生变化后延迟几百毫秒自动刷新渲染结果。要实现这个功能，需要解决三个问题：代码编辑、代码组装、安全渲染。
代码编辑可以直接用textarea，但体验较好的做法是引入CodeMirror或者Monaco Editor这类编辑器库，它们提供语法高亮、自动缩进等能力。这里为了演示清晰，先用一个简单的布局把骨架搭出来：
<div class="container">
<div class="editor-pane">
<textarea id="html-code" placeholder="输入HTML"></textarea>
<textarea id="css-code" placeholder="输入CSS"></textarea>
<textarea id="js-code" placeholder="输入JavaScript"></textarea>
</div>
<div class="preview-pane">
<iframe id="preview-frame" ></iframe>
</div>
</div>布局上推荐左右分栏，左边编辑区占一半，右边预览区占一半。iframe一定要显式设置宽高，否则某些浏览器下会出现高度塌陷。样式部分可以用flex布局让编辑区和预览区各自撑满，这样用户拖动浏览器窗口时布局也能自适应。
二、代码组装与iframe的srcdoc渲染方案
用户输入的三段代码是分离的，但浏览器渲染需要一份完整的HTML文档。所以第一步是把它们拼装成一个完整文档，然后交给iframe渲染。现代浏览器提供了一个非常好用的属性叫srcdoc，它可以直接接收一段HTML字符串作为iframe的内容，比传统的document.write干净得多。
组装的核心逻辑如下：先写一个文档头部，把CSS代码包进<style>标签，把JavaScript代码包进<script>标签，最后把HTML片段放进body。注意脚本标签要放在body内容之后，这样JS执行时DOM元素已经存在了。
function buildDocument(html, css, js) {
return `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>${css}</style>
</head>
<body>
${html}
<script>
try {
${js}
} catch (e) {
console.error(e);
}
</script>
</body>
</html>`;
}
function render() {
const frame = document.getElementById('preview-frame');
frame.srcdoc = buildDocument(
document.getElementById('html-code').value,
document.getElementById('css-code').value,
document.getElementById('js-code').value
);
}这里有一个细节值得注意：每次给srcdoc赋新值，iframe就会完整重新加载一次文档，之前脚本里定义的定时器、事件监听都会被清掉，这正好符合预览工具的预期，避免了状态残留导致的诡异现象。
三、实时刷新与防抖处理
实时预览的关键是监听代码变化。如果用户每敲一个字符就重新渲染一次，输入较长代码时页面会明显卡顿，因为每次渲染都要重新解析整个文档、执行全部脚本。解决办法是防抖（debounce）：用户停止输入后延迟一段时间再执行渲染，通常300到500毫秒比较合适。
let timer = null;
document.querySelectorAll('textarea').forEach(ta => {
ta.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(render, 400);
});
});除了input事件，还要考虑用户粘贴代码的场景。粘贴操作同样会触发input事件，所以上面这段代码已经覆盖了。如果想更完善一些，可以额外监听change事件作为兜底，或者在编辑器区域加一个手动运行的按钮，给习惯于显式触发的用户多一个选择。很多成熟的在线工具都提供自动刷新开关，让用户自己决定是否实时渲染，这个交互细节可以在后期迭代时加上。
四、安全隔离：sandbox属性与错误捕获
预览工具本质上是执行用户提交的任意代码，如果直接在主页面里运行，用户脚本可以访问你页面的Cookie、localStorage，甚至篡改你的工具本身。所以iframe的sandbox属性是必须项。加上sandbox后，iframe内的文档会处于一个受限环境中，脚本默认不能执行，需要显式声明允许的能力。
<iframe id="preview-frame"
sandbox="allow-scripts allow-modals">
</iframe>几个常用的sandbox值要理解清楚：allow-scripts允许执行脚本，这是预览功能的基础；allow-modals允许弹出alert和confirm对话框；而allow-same-origin这个值要谨慎，如果同时开启allow-scripts和allow-same-origin，用户脚本就能访问宿主页面的资源，沙箱基本形同虚设。除非有明确需求，否则不要同时开启这两个值。
另一个提升体验的点是错误提示。可以在组装文档时注入一段全局错误捕获脚本，把预览区发生的报错通过postMessage发送给宿主页面，宿主页面收到后在控制台面板展示，方便用户定位代码问题：
// 注入到预览文档中的错误捕获
window.onerror = function (msg, source, line, col) {
parent.postMessage({
type: 'preview-error',
message: msg + ' (行 ' + line + ')'
}, '*');
};
// 宿主页面接收错误信息
window.addEventListener('message', e => {
if (e.data && e.data.type === 'preview-error') {
console.warn('预览错误：', e.data.message);
}
});五、进阶方案：Blob URL与方案对比
srcdoc虽然方便，但在某些场景下有局限，比如你想让预览文档拥有独立的URL（方便分享链接或在新标签页打开），这时可以改用Blob URL方案。原理是用Blob对象包装组装好的HTML字符串，生成一个临时URL赋给iframe的src：
function renderWithBlob(htmlDoc) {
const blob = new Blob([htmlDoc], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const frame = document.getElementById('preview-frame');
frame.src = url;
// 记得在合适时机释放，比如下次渲染前
URL.revokeObjectURL(frame.dataset.oldUrl || '');
frame.dataset.oldUrl = url;
}两种方案各有优劣：srcdoc实现简单，无需管理URL生命周期，兼容性在主流浏览器上都没问题；Blob URL的优势在于文档有真实的地址，可以在新窗口打开，且配合Service Worker可以做更灵活的拦截处理。此外还有一种老方案是通过iframe内容窗口调用document.write写入内容，这种方式现在不推荐，因为它对加载时机敏感，容易出错且性能较差。
实际项目中还应该考虑持久化问题，用localStorage保存用户代码、刷新页面后自动恢复，再加上导出HTML文件的功能，这些都不难实现。把上面的渲染、防抖、沙箱、错误捕获几块代码组合起来，一个功能完整的HTML在线预览工具就成型了，你可以在此基础上逐步扩展成自己的在线编程练习平台。