表单提交时需拦截默认行为并用filereader读取html文件，写入带sandbox的iframe以完整预览；须校验扩展名、限制大小、避免innerhtml执行脚本，且注意本地资源404问题。
表单提交时如何避免页面跳转并实时预览 HTML 内容
直接用 form 默认提交会刷新页面，没法预览。必须拦截默认行为，用 JavaScript 读取文件内容并渲染到页面上。
- 给
<form></form>绑定submit事件，调用event.preventDefault() - 用
FileReader读取用户选中的.html文件（注意检查file.type是否为"text/html"或扩展名是否为".html"） - 读取成功后，把结果写入一个
<iframe></iframe>的contentDocument，而不是直接innerHTML到<div> —— 否则内联样式、<code><script></script>、相对路径资源都会失效 -
iframe需提前设置sandbox="allow-scripts allow-same-origin"，否则 JS 不执行、CSS 不加载 - 限制文件大小：检查
file.size，建议上限设为2 * 1024 * 1024（2MB），太大导致FileReader卡顿甚至崩溃 - 简单 MIME 类型校验不够可靠（浏览器可伪造），必须结合扩展名：用
file.name.toLowerCase().endsWith(".html") - 不主动执行或解析 HTML 字符串，尤其避免用
eval()、new Function()或innerHTML插入含<script></script>的内容 - 若需进一步过滤，可在服务端用 DOMPurify 处理，但前端预览阶段保持原始结构更真实
- 纯前端方案无解 —— 这是浏览器安全策略，无法绕过
- 可行妥协：提示用户“仅预览主 HTML 结构，外部资源不生效”，并在预览区顶部加一行 ⚠️ 外部 CSS/JS 未加载
- 若必须支持，需起一个本地 HTTP 服务（如
npx http-server），让用户把整个目录拖进去，再用fetch读取 HTML 并注入 iframe，但这已超出“简易”范畴 - 另一种轻量做法：提取 HTML 中的
<style></style>和内联<script></script>，单独执行，但会破坏作用域和加载顺序，慎用 -
<input type="file">必须有accept=".html"，否则 iOS Safari 可能不显示 HTML 文件 - 确保
input没被display: none或opacity: 0遮挡又没配label[for]—— 很多“隐藏上传框”写法在移动端失效 -
FileReader.onload是异步回调，别在它外面直接操作iframe.contentDocument，得等readyState === "complete" - Chrome 95+ 对
iframe.srcdoc执行脚本有限制，务必用iframe.contentDocument.write()+close()，而不是srcdoc
上传前校验 HTML 文件是否合法且安全
用户可能上传任意内容，包括恶意脚本或超大文件。不能只靠前端校验，但前端要拦住明显异常，提升体验。
iframe 预览区无法加载本地 CSS/JS 资源怎么办
HTML 文件里写的 <link href="style.css"> 或 <script src="app.js"></script> 在 iframe 里 404，因为浏览器禁止跨 origin 加载本地文件（file:// 协议限制）。
上传按钮点击后没反应？检查这几个关键点
常见静默失败，不是代码写错，而是 DOM 或权限细节没对上。
实际跑起来最易卡在 iframe 写入时机和跨域提示上。只要确保 input 触发、FileReader 成功读完、iframe 已插入 DOM 且完成初始化，后续就只是字符串搬运了。
