必须用 iframe 实现 PDF 和 HTML 文档预览，因其原生支持、语义清晰、可访问性好、样式脚本隔离且全浏览器兼容；object 和 JS 动态加载均存在兼容性、安全性或功能缺失问题。
直接说结论：PDF 和 HTML 两类文档的预览，必须用 iframe 做自适应内嵌节点，其他方式要么不兼容、要么破坏语义或可访问性。
为什么必须用 iframe 而不是 object 或 JS 动态加载
浏览器对 PDF 的原生支持只绑定在 iframe 的 src 上；object 在 Chrome/Firefox 中常触发下载而非预览，Safari 对 object 加载 PDF 的行为不稳定；JS 动态加载 HTML 片段后插入 innerHTML 会剥离脚本、丢失样式隔离，且无法复用被嵌页面的 <script> 和事件监听器。而 iframe 提供独立浏览上下文，天然隔离、可访问性明确（支持 title 属性）、无需 JS 即可工作。
-
iframe是唯一被所有现代浏览器一致支持的 PDF 内联预览载体 -
object在 file:// 协议下多数浏览器直接拒绝加载 HTML，部署到服务器后仍存在 MIME 类型协商失败风险 - JS 动态加载 HTML 后若目标文件含
<link rel="stylesheet">或<script>，这些资源不会自动解析执行
iframe 自适应宽高的关键 CSS 写法
单纯设 width="100%" height="600" 会导致小屏溢出或留白；必须配合 CSS 控制容器和 iframe 本身。核心是让 iframe 容器撑满父级，再用 aspect-ratio 或 padding-top 技法锁定比例。
- 给包裹
iframe的<div>设position: relative; width: 100%; -
iframe设position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 或更简洁：容器设
aspect-ratio: 2 / 1;（PDF 常见宽高比），iframe设width: 100%; height: 100%; - 避免用
scrolling="no"（HTML5 已废弃），改用style="overflow: hidden;"
PDF 预览中容易被忽略的 URL 参数与 fallback 处理
不加参数时，Chrome 默认显示工具栏、缩放控件，移动端易误触；不设 fallback，旧版 IE 或禁用 JS 的环境会显示空白框。
立即学习“前端免费学习笔记（深入）”；
- 常用参数直接拼在
src后：例如https://www.php.cn/link/4f6b1090d9a7e4d010ab27aedaed05a9#toolbar=0&zoom=FitWidth&page=1 -
#toolbar=0隐藏顶部工具栏，&zoom=FitWidth横向适配宽度，&page=1强制从第一页开始 -
iframe内部文本内容就是 fallback：写成<iframe src="...">您的浏览器不支持 PDF 预览，请<a href="https://www.php.cn/link/4f6b1090d9a7e4d010ab27aedaed05a9">点击下载/iframe></a> - 务必确保服务器返回 PDF 的
Content-Type是application/pdf，否则 Safari 会直接下载
HTML 文档内嵌时的同源与 sandbox 权限控制
嵌入外部 HTML 页面时，跨域会触发 CORS；即使同源，也需限制其脚本权限，否则可能污染主页面全局变量或 DOM。
- 同源前提下，用
sandbox="allow-scripts allow-same-origin"允许执行脚本并保持同源标识 - 若只需静态展示，去掉
allow-scripts，防止被嵌页面运行恶意 JS - 不要用
sandbox=""（空值），它默认禁用脚本、表单、插件、弹窗等全部能力，连console.log都会报错 -
name属性可配合<a target="xxx">实现链接定向加载，但仅限同源
真正麻烦的是 PDF 的 MIME 类型配置和服务端缓存策略——前端写得再准，后端没配对 application/pdf，或者 CDN 缓存了错误的 Content-Type，iframe 就永远只下载不预览。
