已基本被弃用，是当前唯一推荐的现代嵌入方案，因其持续获主流浏览器维护、支持csp与sandbox等安全机制；它通过承载可控html页面替代传统插件，配合postmessage实现安全通信。
<embed></embed> 已基本被弃用，<iframe></iframe> 是当前唯一推荐的现代方案——不是因为功能更强，而是因为它是唯一还在被主流浏览器持续维护、有明确标准、能配合 CSP 和 sandbox 等安全机制的嵌入方式。
为什么 <embed></embed> 不再可用
它曾用于嵌入 Flash、PDF、音视频等外部内容，但缺乏标准化属性、无法设置 sandbox、不支持 referrerpolicy，且自 2021 年起 Chrome/Firefox/Safari 全面禁用 Flash 后，<embed></embed> 实际只剩 PDF 和少数本地 MIME 类型勉强可用。更关键的是：它不触发 load 事件、无法通过 JS 可靠监听加载状态、也不支持 loading="lazy"。
- Chrome 95+ 对非 PDF 的
<embed></embed>会静默降级或报net::ERR_BLOCKED_BY_CLIENT - Firefox 默认禁用所有
<embed></embed>的插件上下文（plugin.state.flash = 0） - 即使
<embed src="doc.pdf"></embed>能显示，也无法用 JS 获取其内部 DOM 或控制滚动位置
<iframe></iframe> 怎么替代传统插件场景
现代做法不是“嵌入插件”，而是“嵌入一个可控的 HTML 页面”——这个页面本身可加载 JS、调用 API、响应事件，并由父页通过 postMessage 控制。
- PDF 查看：用
<iframe src="doc.pdf" width="100%" height="600"></iframe>（注意：仅当服务器返回Content-Type: application/pdf才能触发内建 PDF 阅读器） - 第三方图表/编辑器：封装成独立 HTML 文件（如
chart-wrapper.html），再用<iframe src="chart-wrapper.html?data=xxx" sandbox="allow-scripts allow-same-origin"></iframe> - 避免跨域限制：确保 iframe 页面与主站同源，或服务端显式设置
Access-Control-Allow-Origin
容易忽略的兼容性细节
看似简单的 <iframe></iframe> 在真实项目里常因三处配置失效：
-
sandbox属性漏写allow-scripts→ iframe 内 JS 完全不执行（白屏无报错） -
src指向相对路径但未加/开头 → 在子路由下（如/admin/report）变成请求/admin/chart-wrapper.html而非根路径 - 父页用
iframe.contentWindow直接访问子页 DOM → 跨域时抛Blocked a frame from accessing a cross-origin frame，必须改用postMessage
真正要加载“插件逻辑”的地方，现在都该交给 <script type="module"></script> 或动态 import()，而不是依赖 <embed></embed> 或旧式 object 插件机制。iframe 只负责隔离和承载，不负责执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
