HTML代码编辑与运行方法详解

本文详细介绍了在HTML页面中内嵌代码编辑与运行功能的四种主流实现方案：利用CodeMirror配合Function构造器实现轻量级JavaScript即时执行；通过Monaco Editor结合Web Worker与vm2沙箱保障安全、隔离的代码执行环境；采用iframe动态注入HTML/CSS/JS实现完全隔离的实时渲染预览；以及借助BrowserFS模拟本地文件系统，赋予网页类IDE的保存、打开和持久化能力——无论你是想打造教学演示页、技术博客交互示例，还是构建轻量级在线编码工具，这些开箱即用、兼顾性能与安全的方案都能帮你摆脱对外部平台的依赖，在纯前端环境中高效、可靠地运行代码。

如果您希望在HTML页面中直接编辑和运行代码块，而非依赖外部开发环境或在线平台，则需要在页面内嵌入可交互的代码编辑与执行功能。以下是实现该目标的具体方法：

一、使用CodeMirror + JavaScript动态执行

CodeMirror是一个轻量级、可嵌入的文本编辑器组件，支持语法高亮、行号、自动缩进等功能；配合eval()或Function构造器可实现JavaScript代码块的即时运行（仅限客户端JS执行）。注意：此方式不适用于HTML/CSS实时渲染，且需严格限制输入来源以避免安全风险。

1、在HTML页面的中引入CodeMirror CSS文件。

2、在底部引入CodeMirror JS文件及配套语言模式脚本（如javascript.js）。

3、添加一个<textarea id="editor"></textarea>作为编辑区域容器。

4、使用CodeMirror.fromTextArea()初始化编辑器实例，并设置mode为"javascript"。

5、添加一个按钮，点击时获取编辑器内容，用Function(code)()执行（避免直接使用eval）。

6、将执行结果输出至预设的

二、集成Monaco Editor并启用沙箱执行

Monaco Editor是VS Code的开源核心，功能完整但体积较大；配合Web Worker和vm2等沙箱库可在服务端或本地Worker中安全执行代码。浏览器端直接使用eval仍存在XSS隐患，因此必须剥离DOM操作指令并拦截document、window等全局对象访问。

1、通过CDN加载Monaco Editor的AMD模块化版本。

2、创建

3、调用monaco.editor.create()并配置language为"javascript"。

4、绑定按钮事件，在触发前对用户输入进行静态分析，移除所有包含document.write、alert、fetch、XMLHttpRequest的关键字。

5、将清洗后的代码送入Web Worker，由Worker内部的vm2沙箱执行并返回结果。

6、Worker需预先加载vm2的浏览器兼容构建版本，并设定超时限制（如200ms）防止死循环。

三、基于iframe的HTML/CSS/JS实时预览

对于需要同时编辑HTML、CSS、JS并查看渲染效果的场景，可采用三栏式结构：左侧为代码区（分别对应HTML/CSS/JS标签页），中间为，确保启用sandbox属性以禁止弹窗、表单提交等危险行为。

3、监听各textarea的input事件，延迟300ms后触发更新函数。

4、拼接三段代码生成完整HTML字符串，其中CSS用