可实时运行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、添加一个空的元素用于渲染输出，设置sandbox="allow-scripts"属性以限制脚本权限。
4、绑定输入事件监听器，当任意代码区域内容变更时，拼接三部分代码生成完整HTML字符串，写入iframe的document.write()中。
5、确保拼接逻辑中对CSS使用包裹，对JS使用包裹，并将HTML主体内容直接插入body位置。
二、集成JSFiddle风格的iframe沙箱方案
该方法复用浏览器原生iframe的沙箱机制，通过设置sandbox属性控制执行权限，同时利用srcdoc属性直接写入HTML内容，无需document.write调用，兼容性更好且更安全。
1、在页面中放置三个元素，分别标记id为”html-input”、”css-input”、”js-input”。
2、创建一个，不设置src，仅配置sandbox="allow-scripts allow-same-origin"。
3、编写函数读取三个textarea的值，构造标准HTML文档结构，其中CSS放入，JS放入，HTML内容作为body子节点。
4、将构造好的HTML字符串赋值给iframe的srcdoc属性，触发重新渲染。
5、为防止XSS风险，必须对用户输入中的script标签和onxxx事件属性进行正则过滤或DOMPurify库净化。
三、采用Monaco Editor嵌入轻量版
该方法借助微软开源的Monaco Editor（VS Code同源）提供专业级编辑体验，配合Blob URL方式加载执行环境，适合对代码提示、错误检查有更高要求的场景。
1、通过npm安装@monaco-editor/react或直接加载monaco-editor CDN资源。
2、初始化三个Monaco编辑器实例，分别配置language为”html”、”css”、”javascript”，并启用自动补全与语法校验。
3、监听编辑器change事件，获取当前模型值，组合成完整HTML文档字符串。
4、创建Blob对象，类型为”text/html”，将组合后的字符串作为内容，生成URL并赋给iframe的src属性。
5、每次更新后调用URL.revokeObjectURL()释放旧URL引用，避免内存泄漏。
以上就是如何添加html运行框_在网页中添加HTML代码运行框【添加】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1604852.html
微信扫一扫 
支付宝扫一扫 
