需同时设置html/body无边距、父容器100vw/vh、iframe无边框且块级显示，并针对跨域用sandbox权限、safari用-webkit-fill-available、检查x-frame-options拦截。
iframe 全屏显示时内容被裁剪或留白怎么办
直接给 iframe 设 width: 100%; height: 100% 通常无效——父容器没高度、body 默认有 margin、iframe 自身有 border，三者叠加就导致内容压不进视口。必须同时控制三层：iframe、其父容器、页面根级布局。
- 确保
html和body的 margin/padding 为 0，且设height: 100% - 包裹
iframe的容器（比如div#frame-container）也要设height: 100vh; width: 100vw; margin: 0 -
iframe本身加border: none; display: block，避免行内元素默认基线留空
如何让 iframe 内嵌页真正“撑满”整个浏览器窗口
仅靠 CSS 不足以应对跨域页面的尺寸同步问题。如果目标网页同源，可用 JS 动态读取其 document.documentElement.scrollHeight 并设置 iframe 高度；但多数场景下目标页是跨域的，此时只能依赖 viewport 适配和 iframe 的 sandbox 属性配合。
- 优先用
height: 100vh; width: 100vw+position: fixed; top: 0; left: 0; z-index: 9999强制覆盖全屏 - 添加
sandbox="allow-scripts allow-same-origin allow-popups"（按需开放权限），否则部分跨域页会拒绝渲染或禁用 JS 调整尺寸 - 避免用
zoom或transform: scale()拉伸 iframe，会导致鼠标事件坐标错位
iframe 全屏后点击事件失效或坐标偏移的排查点
常见于使用 transform: scale()、iframe 外层有 overflow: hidden、或目标页启用了 pointer-events: none。尤其当内嵌页是 React/Vue SPA 时，路由切换可能重置 body 样式。
- 检查目标页是否设置了
html { pointer-events: none }—— 这会让所有点击穿透到父页 - 确认 iframe 是否被其他绝对定位元素遮挡，用浏览器开发者工具的 “Toggle element inspection” 实时验证层级
- 若需监听 iframe 内点击，且同源，可通过
iframe.contentWindow.addEventListener('click', ...)；跨域则只能依赖 postMessage 协议通信
移动端 Safari 中 iframe 全屏显示异常的兼容处理
iOS Safari 对 100vh 解析不稳定（地址栏收起/展开时视口高度变化），且默认禁用 iframe 的滚动（scrolling="no"），导致内容截断又无法滑动。
- 改用
min-height: -webkit-fill-available替代100vh，对 Safari 更可靠 - 显式添加
scrolling="yes"和style="overflow: auto; -webkit-overflow-scrolling: touch" - 避免在 iframe src 中使用 URL fragment（如
#section），Safari 可能因 hash 变化触发意外重载
X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none' 主动拦截，这种情况下任何前端脚本都无效，只能换方案或联系对方配置白名单。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
