如何添加html运行框_在网页中添加HTML代码运行框【添加】

可实时运行HTML代码的交互式编辑框可通过三种方案实现：一、CodeMirror+iframe动态执行，用document.write渲染；二、JSFiddle风格iframe沙箱，用srcdoc属性加载；三、Monaco Editor+Blob URL，提供专业编辑体验。

如果您希望在网页中嵌入一个可实时运行HTML代码的交互式编辑框，使用户能够输入并查看HTML、CSS和JavaScript的效果，则需要引入支持代码编辑与执行的前端组件。以下是实现此功能的具体步骤：

一、使用CodeMirror + iframe动态执行

该方法通过CodeMirror提供语法高亮的代码编辑区域，并将用户输入的HTML内容注入到iframe中实时渲染，避免污染主页面DOM且具备基本沙箱隔离效果。

1、在页面中引入CodeMirror CSS与JS文件，例如从CDN加载v5.65.2版本。

2、创建三个标签页式文本域，分别对应HTML、CSS、JS代码输入区域，并为每个区域初始化CodeMirror实例，设置mode为"htmlmixed"、"css"、"javascript"。

立即学习“前端免费学习笔记（深入）”；

3、添加一个空的<iframe></iframe>元素用于渲染输出，设置sandbox="allow-scripts"属性以限制脚本权限。

4、绑定输入事件监听器，当任意代码区域内容变更时，拼接三部分代码生成完整HTML字符串，写入iframe的document.write()中。

5、确保拼接逻辑中对CSS使用<style></style>包裹，对JS使用<script></script>包裹，并将HTML主体内容直接插入body位置。

二、集成JSFiddle风格的iframe沙箱方案

该方法复用浏览器原生iframe的沙箱机制，通过设置sandbox属性控制执行权限，同时利用srcdoc属性直接写入HTML内容，无需document.write调用，兼容性更好且更安全。

1、在页面中放置三个<textarea></textarea>元素，分别标记id为"html-input"、"css-input"、"js-input"。

2、创建一个<iframe id="preview-frame"></iframe>，不设置src，仅配置sandbox="allow-scripts allow-same-origin"。

标签： css react javascript java html js 前端 npm 浏览器 cdn 微软 vs code