标签仅支持同源PDF、SVG、HTML片段嵌入，需严格匹配data、type及响应头；跨域或动态内容不可行，无法替代或DOM操作。
标签在现代浏览器中仅对同源静态资源（如 PDF、SVG、HTML 片段）有实际可用性，且必须满足严格条件；跨域或动态内容基本不可行，别指望它替代 或 DOM 操作。
同源 PDF 嵌入：data、type、响应头三者必须对齐
PDF 是目前唯一能稳定工作的场景，但失败几乎都源于配置错位：
-
data必须是可访问的同源 URL（http://或https://协议），file://在 Chrome/Firefox 下大概率静默失败 -
type必须写成"application/pdf"—— 写成"pdf"、"text/pdf"或留空，浏览器直接跳过内嵌逻辑 - 服务端返回的 HTTP 响应头必须含
Content-Type: application/pdf；Nginx/Apache 若未配 MIME 类型，会触发 fallback 或强制下载 - 加
typemustmatch属性可强制校验响应头与type一致，避免后端返回 HTML 错误页却被当 PDF 渲染
示例正确写法：
<object data="/docs/report.pdf" type="application/pdf" width="100%" height="600" typemustmatch> <p>PDF 加载失败，请<a href="/docs/report.pdf">点击下载</a></p> </object>
同源 SVG 加载：DOM 隔离 + 外部引用失效风险
用 加载同源 SVG 时，内容处于独立文档上下文，主页面 JS 无法直接操作其内部元素：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
contentDocument仅在同源时可用，且需等load事件后才能安全访问：objectEl.addEventListener('load', () => { const svg = objectEl.contentDocument.querySelector('svg'); }) -
width/height会覆盖 SVG 的viewBox缩放逻辑；设为100%更利于响应式，但父容器必须有明确宽度 - 若 SVG 内含
等外部引用，跨域即失败；此时降级用
- SVG 内联脚本（如
同源 HTML 片段加载：不能当“动态表格容器”用
想用 直接插入表格？不行：
- 浏览器会尝试加载并渲染整个 HTML 文档（含
），不是提取其中某段- 即使返回纯
...，也不会被解析为当前页面 DOM；你看到的是白屏或 fallback
- 若真要加载片段，必须确保目标文件是完整同源 HTML（如
table_fragment.html），再通过objectEl.contentDocument.querySelector('table')取节点，并用document.importNode()搬运到主文档 —— 直接appendChild会报错- 该方式无错误兜底机制：
onerror不触发，控制台只显示Failed to load resourcefallback 内容不是“备用文案”，而是失败信号接收器
很多人把 fallback 当成万能兜底层，其实它只在极少数明确失败条件下才显示：
- 仅当 HTTP 请求失败（404/500/断网）或响应
Content-Type与type不匹配时触发 -
data路径拼错（如"./pdfs/report.pdf"实际在/static/files/）不会触发 fallback，而是静默白屏 - fallback 必须是合法 HTML 元素：
PDF 加载失败
或纯文本不行 - 移动端（iOS Safari、微信内置浏览器）几乎从不显示 fallback，而是直接调起系统 PDF 应用或静默失败
真正容易被忽略的是：fallback 是否生效，完全取决于服务端响应状态和浏览器版本策略，而不是你写了什么——它不像
那样有稳定onload/onerror可靠捕获。 - 即使返回纯
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
