FileReader可纯前端读取本地HTML文件并预览：监听input[type="file"]的change事件，用readAsText(file, 'UTF-8')异步读取文本内容，再插入指定div中；不执行script、不加载外部资源，避免XSS与跨域问题。
不能直接“上传并解析”——浏览器能解析的是本地 HTML 文件（file:/// 协议），但上传动作本身已将文件发往服务器，此时它不再处于浏览器可直接读取的本地沙箱中。真想在前端看到内容，得走“读取本地文件 + 渲染”这条路，不经过上传。
用 FileReader 读取 HTML 文件内容再插入页面
用户选中一个 .html 文件后，可用 FileReader 同步读取其文本内容，然后用 innerHTML 或 document.write()（慎用）注入当前页面。这是唯一能在不发请求前提下“预览 HTML 源码效果”的方式。
-
FileReader.readAsText(file, 'UTF-8')是必须的，否则中文会乱码 - 读取完成后，把结果塞进一个
<div id="preview"></div>，别直接写到document.body，否则会覆盖整个页面 - 注意：读取的是纯文本，不会执行其中的
<script>标签（浏览器安全限制），也不会加载相对路径的 CSS/JS/图片——那些资源仍按当前页面 origin 解析，404 风险极高 - 示例片段：
const input = document.querySelector('input[type="file"]'); input.addEventListener('change', (e) => { const file = e.target.files[0]; if (!file || !file.name.endsWith('.html') && !file.name.endsWith('.htm')) return; const reader = new FileReader(); reader.onload = () => { document.getElementById('preview').innerHTML = reader.result; }; reader.readAsText(file, 'UTF-8'); });
为什么 URL.createObjectURL(file) 不适合 HTML 预览
这个 API 对图片、视频很高效，但它为 HTML 文件生成的 blob URL（如 blob:http://localhost/xxx）在打开时会触发跨域限制：脚本无法访问其 DOM，内联样式和相对路径资源全部失效，且多数浏览器会直接下载而非渲染——它本质是“当作附件处理”，不是“当作网页处理”。
- Chrome 和 Edge 会弹出下载提示，而不是跳转渲染
- Firefox 可能渲染，但所有
<script src="xxx.js">和<link href="style.css">都 404，因为路径解析基于当前页面，不是 blob URL 的上下文 - 即便强行
window.open(url)，新窗口里也拿不到document，无法做任何动态操作
上传后服务端返回 HTML 内容再渲染？小心 XSS
如果非要走上传流程（比如先校验、再存储、再返回），服务端可以读取刚存的 HTML 文件，把内容原样返回给前端，再用 innerHTML 插入。但这极其危险——相当于把用户可控的任意 HTML 直接执行。
立即学习“前端免费学习笔记（深入）”；
- 必须剥离或转义所有
<script>、onerror=、javascript:等执行点，推荐用 DOMPurify 库净化 - 禁止返回含
<base href>的 HTML，否则相对链接可能指向恶意站点 - 更稳妥的做法：服务端只返回结构化数据（如标题、段落数组），前端用模板拼接，彻底隔离执行环境
真正安全又可用的“HTML 预览”，只有两条路：一是用 FileReader 读本地文件并手动处理资源路径；二是把 HTML 当作纯文本展示（比如用 pre + code）。任何试图绕过同源策略去“执行上传来的 HTML”的做法，都在和浏览器的安全模型硬碰硬。
