iframe 无法直接加载本地 html 文件，必须用 filereader 读取后写入 contentdocument，并设置 sandbox="allow-scripts allow-same-origin" 才能执行脚本和样式；外部资源（css/js）在 file:// 下必然 404，仅单文件内联 html 可可靠预览。
不能直接用 src="file:///xxx.html" —— 浏览器会报 Not allowed to load local resource，必须走 FileReader + URL.createObjectURL() 这条路径。
为什么 iframe src 写本地路径一定失败
现代浏览器（Chrome、Firefox、Safari、Edge）全部禁止 iframe 直接加载 file:// 协议地址。这不是配置问题，是硬性安全策略。你看到的空白、控制台红字 Not allowed to load local resource 或者直接静默失败，都是这个原因。哪怕路径完全正确、文件真实存在，也毫无例外。
常见误操作包括：
- 把用户选中的
File对象直接赋给iframe.src（比如iframe.src = file） - 用
file.path或file.webkitRelativePath拼出本地路径再塞进去 - 在开发时双击 HTML 文件打开（
file://协议下运行），然后试图用 iframe 加载同目录其他 HTML
正确做法：用 FileReader 读取并注入 iframe.contentDocument
预览 HTML 文件不是“显示一个资源”，而是“执行一段可交互的文档”。仅靠 URL.createObjectURL() 对 HTML 文件效果有限：它能触发下载或乱码，因为浏览器会按 MIME 类型决定行为；而 text/html 类型的 Blob URL 在多数浏览器中不会自动执行脚本、加载相对 CSS/JS，甚至可能被当成纯文本。
所以真正可靠的方案是手动写入 iframe.contentDocument：
- 监听
<input type="file">的change事件 - 用
FileReader.readAsText(file, "UTF-8")读取内容（注意编码，否则中文乱码） - 读取成功后，调用
iframe.contentDocument.open()→write()→close() - iframe 必须已插入 DOM 且完成初始化，否则
contentDocument为null - 若需执行脚本和样式，iframe 必须带
sandbox="allow-scripts allow-same-origin"属性
示例关键片段：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const input = document.querySelector('input[type="file"]');
const iframe = document.querySelector('iframe');
input.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file || !file.name.toLowerCase().endsWith('.html')) return;
const reader = new FileReader();
reader.onload = () => {
const doc = iframe.contentDocument;
doc.open();
doc.write(reader.result);
doc.close();
};
reader.readAsText(file, 'UTF-8');
});
预览区 iframe 必须加 sandbox 属性
不加 sandbox，HTML 中的 <script></script> 不执行、<link rel="stylesheet"> 404、fetch 报跨域错误——哪怕所有文件都在同一目录。这是因为 iframe 默认启用最严格沙箱，连同源脚本都禁掉。
最小可用配置是：
-
sandbox="allow-scripts allow-same-origin"：允许 JS 执行 + 同源 DOM 访问（用于调试） - 如果 HTML 里有表单提交，加
allow-forms - 如果用了
localStorage或postMessage，需额外授权 - 切勿写成
sandbox=""（空值 = 全部禁止），那等于白写
注意：allow-same-origin 只在 Blob URL 或同源 HTTP 环境下生效；在 file:// 页面中加载的 iframe，即使加了该属性，依然无法绕过协议隔离。
外部资源（CSS/JS）404 是必然的，别指望前端解决
用户上传的 HTML 若含 <link href="style.css"> 或 <script src="app.js"></script>，这些路径在 iframe 中全部 404。原因很直接：浏览器禁止从 file:// 协议发起任何子资源请求（包括 CSS、JS、图片、字体）。
这不是 bug，是设计。前端层面无解。你能做的只有：
- 提前提示用户：“仅预览主 HTML 内容，外部文件不加载”
- 在预览前扫描 HTML 字符串，提取
<style></style>和内联<script></script>并保留，删掉所有href/src外链标签（但会破坏结构） - 如需完整功能，必须起本地 HTTP 服务（例如
npx http-server），让用户把整个项目目录拖入，再用fetch加载 HTML 并注入 —— 这已超出“快速搭建”范畴
真正轻量又靠谱的预览，只适用于单文件 HTML（所有逻辑、样式、脚本都内联或 data-url 编码）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
