iframe嵌入只读文档需确保src指向可直接浏览的静态文件或支持嵌入的托管服务，禁用脚本并配置sandbox属性实现真正只读，同时用CSS控制尺寸与滚动，并提供加载失败的降级提示。
iframe 嵌入只读文档时，src 必须指向可直接浏览的静态文件或托管服务
浏览器对 iframe 的内容加载有严格限制：它只能加载同源或明确允许跨域的资源，且目标 URL 必须返回一个可渲染的文档（如 HTML、PDF 或支持内联预览的托管链接）。本地 file:// 路径、未经配置的后端接口、或需要登录跳转的文档页基本无法直接嵌入。
常见错误现象：Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE 或空白框 + 控制台报 Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'DENY'。这说明目标服务主动禁止了 iframe 嵌入。
- 优先使用支持嵌入的托管服务：如 Google Docs（加
&embedded=true）、OneDrive（分享链接选“嵌入”）、PDF.js 托管的 PDF、或 GitHub raw 链接（仅限纯文本/HTML/PDF 等 MIME 类型正确的情况） - 避免直接指向后端 API 接口（如
/api/doc?id=123），这类响应通常不是完整文档，也缺少X-Frame-Options: SAMEORIGIN或CSP frame-ancestors白名单配置 - PDF 文件若放在同域下，确保服务器返回
Content-Type: application/pdf；否则 Chrome 可能下载而非内联显示
设置 sandbox 属性防止文档执行脚本，真正实现“只读”
仅靠视觉上禁用编辑按钮或隐藏工具栏，不等于安全只读——iframe 内的 JS 仍可能弹窗、跳转、甚至发起请求。必须用 sandbox 属性切断其能力。
最简只读组合是：sandbox="allow-scripts allow-same-origin" 不够安全，因为它允许脚本运行并访问父页面；真正只读应去掉 allow-scripts，只保留必要权限：
立即学习“前端免费学习笔记（深入）”；
-
sandbox="allow-downloads allow-popups"—— 允许用户下载或查看弹出窗口（如 PDF 的打印对话框），但禁止任何脚本执行 - 完全禁用交互：直接写
sandbox=""（空值），此时 iframe 内所有脚本、表单、插件、弹窗均被禁用，文档仅能静态渲染 - 注意：
allow-same-origin和allow-scripts不能共存于空 sandbox，否则会失效；只要没显式声明，就默认全部禁止
控制尺寸与滚动行为，避免移动端错位或裁剪
iframe 默认宽高为 300×150px，且 scrolling 属性在现代 HTML 中已废弃，必须用 CSS 控制。
- 固定尺寸：用
width和height属性设像素值（如width="800" height="600"），适合桌面端确定布局 - 响应式方案：CSS 中设
width: 100%; height: 60vh;，再配合overflow: auto;确保内容可滚动 - 隐藏滚动条但保留滚动能力（仅 Webkit）：
iframe::-webkit-scrollbar { display: none; }，同时需设overflow: scroll;在容器上 - PDF 在 Safari 中常因高度计算不准导致底部截断，建议加
min-height: 500px;并监听load事件后调用iframe.contentWindow?.document?.body.scrollHeight动态重设高度
兼容性与 fallback：当 iframe 加载失败时要有降级提示
不是所有环境都支持 iframe 内嵌 PDF 或第三方文档服务——比如 iOS 微信内置浏览器会拦截部分外链，IE 不支持 sandbox，某些 PDF 直链会被强制下载。
- 在
iframe标签内部写提示文字：<iframe src="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c">您的浏览器不支持嵌入文档，请点击<a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c">此处下载</a></iframe>，这部分文字只有加载失败时可见 - 用 JavaScript 检测加载状态：
iframe.addEventListener('error', () => { iframe.src = 'fallback.html'; })，但注意 PDF 错误不会触发 error 事件，需结合定时器判断contentDocument是否为空 - 不要依赖
onload判断 PDF 是否就绪——它只表示 iframe 标签加载完成，不代表 PDF 渲染完毕；更可靠的是监听iframe.contentWindow?.document?.readyState === 'complete'
真正难的不是写一行 iframe，而是让不同来源、不同格式、不同终端下的“只读”都一致生效——尤其当文档来自第三方时，你控制不了它的响应头、MIME 类型或前端逻辑，这时候 sandbox 和 fallback 就不是可选项，而是必选项。
