object标签不支持原生全屏API，需用包裹容器模拟全屏：将object放入div，点击时切换容器class使其覆盖视口，设position:fixed、100vw/100dvh尺寸及高z-index，并确保object宽高100%。
object 标签本身不支持原生全屏 API，也不能直接通过 requestFullscreen() 触发全屏 —— 浏览器对 object 的全屏控制非常有限，多数情况下会被忽略或静默失败。
object 全屏请求被拒绝的常见原因
-
object嵌入的内容（如 PDF、Flash 遗留插件、自定义插件）通常运行在沙箱化容器中，浏览器禁止其主动进入全屏 - 即使调用
element.requestFullscreen()，Promise 也会以TypeError: requestFullscreen is not allowed或静默 resolve/reject 结束 - 没有
:fullscreen伪类匹配行为：即使视觉上“撑满”，CSS 的:fullscreen不会生效，无法做样式隔离
替代方案：用包裹容器模拟全屏效果
真正可行的做法不是让 object 自身全屏，而是：
- 将
object放进一个div容器，并控制该容器尺寸与层级 - 用户点击时，切换容器的 class 或内联样式，使其覆盖整个视口
- 同时设置
z-index、position: fixed、top: 0; left: 0; width: 100vw; height: 100dvh;
<div id="object-container"> <object data="doc.pdf" type="application/pdf"></object> </div> <button id="toggle-object-fullscreen">全屏/退出</button>
对应的 JS：
- 监听按钮点击
- 切换容器 class（如
is-fullscreen） - 确保
object在容器内设为width: 100%; height: 100%;
#object-container.is-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
z-index: 2147483647;
background: #000;
}
#object-container.is-fullscreen object {
width: 100%;
height: 100%;
}为什么不用 100vh 而用 100dvh
-
100vh在 iOS Safari 和部分 Android 浏览器中会因地址栏显示/隐藏导致高度跳变（比如从 812px 突然变成 896px） -
100dvh（dynamic viewport height）是 2022 年后标准，代表「当前可用视口高度」，更稳定 - 兼容性注意：Chrome 105+、Safari 16.4+、Firefox 110+ 支持；旧版本需回退到
100vh+ JS 动态监听resize
关键点在于：你从来不是在让 object 全屏，而是在用 CSS 和 DOM 控制它的容器。任何试图直接调用 object.requestFullscreen() 的代码，基本都会失效。
立即学习“前端免费学习笔记（深入）”；
