文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
object标签不适用于嵌入html页面，因其无独立浏览上下文、不继承csp/cookie、跨域常拒载、同域也易因mime校验失败而静默fallback；仅同源+本地http服务+精确响应头+需原生fallback时才可谨慎使用，否则应优先选用iframe。
别用 object 嵌网页——它不是 iframe 的平替，现代浏览器对 object 加载 HTML 的支持既不稳定又不可靠。
为什么 object 加载 HTML 经常白屏或跳转
浏览器对 object data="page.html" type="text/html" 的处理逻辑和 iframe 完全不同：它不创建独立浏览上下文，也不继承主页面的 CSP、cookie 或 referrer；很多现代浏览器（Chrome 90+、Firefox 85+）会直接拒绝渲染跨域 HTML，同域下也常因 MIME 类型校验失败而静默 fallback。
- 服务端返回
Content-Type: text/html是硬性前提，但本地开发时file://协议下该头根本不存在，Firefox 就会忽略type直接拒载 - 写了
typemustmatch但响应头缺失或错配？立刻 fallback，连控制台都不报错 -
object内部的 HTML 不会执行脚本（除非同源且显式启用 sandbox），document.write、DOMContentLoaded全部失效 - 滚动、焦点、键盘事件无法穿透到嵌入页，
tabindex和aria-live失效，可访问性基本归零
object 加载 HTML 的唯一可行场景
仅当满足全部以下条件时，才考虑用 object：同源、本地服务环境（http://localhost）、服务端能精确控制响应头、且你明确需要原生 fallback 触发机制（比如降级为 <p>加载失败，请手动打开</p> 而非空白框）。
- 必须写
type="text/html"，留空或写成html都会触发 fallback -
data必须是相对路径或完整 URL，不能是./page.html?ts=123这类带动态参数的地址（部分浏览器会缓存或解析异常） - 宽高必须显式设置（
width="100%" height="400"或 CSSstyle="height:400px"），否则默认尺寸极小甚至不可见 - fallback 内容必须是合法 HTML 子节点：
<p></p>、<img>可以，纯文本、<script></script>、注释或空格都不算
比 object 更可靠的选择
绝大多数“嵌网页”需求，iframe 是唯一合理解：它有独立上下文、标准事件流、完善的 sandbox 控制、可预测的加载生命周期，且所有主流浏览器行为一致。
- 跨域嵌入？加
sandbox="allow-scripts allow-same-origin"（注意：allow-same-origin仅对同域生效） - 想隐藏滚动条？用 CSS
style="overflow:hidden;border:none;"，别信scrolling="no"（HTML5 已废弃） - 懒加载非首屏内容？加
loading="lazy"属性，Chrome/Firefox 均支持 - 需要 JS 通信？用
postMessage+message事件，比object.contentDocument更安全可控
真正该用 object 的地方
PDF 和 SVG——不是因为它们“也能用”，而是因为这两类资源在 object 下有不可替代的行为特征：PDF 支持原生浏览器查看器 + 精确 MIME 校验，SVG 则保留内部 DOM 隔离性（避免样式污染）和同源 JS 交互能力（contentDocument 可用）。
- 嵌 PDF：必须
type="application/pdf"+ 服务端Content-Type: application/pdf+ 推荐加typemustmatch - 嵌 SVG：不要设死
width/height，用style="width:100%;height:auto;"配合父容器约束，否则 viewBox 缩放失效 - 两者都需注意：
file://协议下 Firefox/Safari 行为不一致，务必走本地 HTTP 服务预览
复杂点在于：你得先判断清楚——到底是要“嵌一个页面”，还是“嵌一份文档”。前者选 iframe，后者再看资源类型。混淆这两者，是所有 object 加载失败的根本原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
