不能用<object>加载动态表格数据，因其不解析HTML字符串、不执行脚本、不响应JS修改；正确方案是AJAX获取JSON后用DOM操作动态生成表格。
直接用 <object> 加载动态表格数据？不行
不能把 <object> 当作“动态表格容器”来用。它不解析 HTML 字符串、不执行内联脚本、不响应 JS 修改的 data 属性——你往里面塞一个返回表格 HTML 的 API 地址（比如 data="/api/table?format=html"），浏览器只会尝试加载并渲染那个 HTML 文档的完整页面（含 <html><body>），而不是提取其中某段 <table> 插入到当前页面里。
<object> 的 load 事件 + contentDocument 才能取到嵌入内容
如果你真要用 <object type="text/html"> 加载一个外部 HTML 片段（如 table_fragment.html），必须等它加载完成，再从独立上下文中取 DOM：
- 确保该 HTML 文件同源，否则
objectEl.contentDocument为null - 监听
load事件，不是DOMContentLoaded或setTimeout - 通过
objectEl.contentDocument.querySelector('table')获取表格节点 - 用
document.importNode()或outerHTML搬运到主文档（直接appendChild会报错）
示例关键片段：
const obj = document.querySelector('object');
obj.addEventListener('load', () => {
const doc = obj.contentDocument;
const table = doc?.querySelector('table');
if (table) {
const imported = document.importNode(table, true);
document.getElementById('target-container').appendChild(imported);
}
});
真正推荐的动态表格方案：AJAX + 原生 DOM 操作
绕开 <object> 的限制，直接请求 JSON 数据，再生成 <tr><td> 更可靠、可控、可调试：
立即学习“前端免费学习笔记（深入）”；
- 后端返回结构化数据（如
[{"name":"Alice","age":32},{"name":"Bob","age":28}]），不是 HTML 字符串 - 用
fetch()或XMLHttpRequest获取，避免跨域和 MIME 类型陷阱 - 循环创建
tr和td，textContent赋值防 XSS，比innerHTML安全 - 需要重载时，清空
tbody再重建，而不是换<object>标签
常见坑：eval() 解析 JSON、拼接字符串插入 innerHTML、忽略空数据导致 undefined 渲染成文字 “undefined”。
为什么有人误以为 <object> 能加载表格？
因为看到 <object data="data.html"> 页面里出现了表格，就以为是“动态加载”。实际是浏览器把整个 data.html 当作独立文档渲染在 <object> 区域内——它和你的主页面表格 DOM 完全隔离，无法被 CSS 选中、无法被 JS 直接操作、滚动/尺寸行为也不一致。这种“加载”只是 iframe 的弱化替代，不是真正的表格集成。
