可正常加载同源页面；跨域时若目标站设置x-frame-options: deny或frame-ancestors 'none'，则被浏览器阻止，无法绕过。
iframe 标签怎么写才能正常加载目标页面
直接写 <iframe src="https://example.com"></iframe> 很可能被拒绝加载——现代浏览器默认阻止跨域页面嵌入，尤其当目标站设置了 X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'。不是你的 iframe 写错了，是对方服务器不许你套。
实操建议：
- 先用浏览器开发者工具的 Network 面板查看目标 URL 响应头，确认是否含
X-Frame-Options或frame-ancestors限制 - 若目标页和你同源（协议+域名+端口完全一致），
src可直接写相对路径，如src="./panel.html" - 若必须跨域且你无权改对方响应头，iframe 会显示空白或报错
Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'deny'.，此时无法绕过
iframe 宽高和滚动条怎么控制才不丑
默认 iframe 会撑满父容器宽度但高度固定为 150px，内容溢出时出现双层滚动条（外层页面 + 内层 iframe），体验极差。
实操建议：
- 显式设置
width和height，例如<iframe width="100%" height="400" src="..."></iframe> - 禁用内嵌页滚动条：加
scrolling="no"（HTML5 已废弃，但多数浏览器仍支持），更稳妥的是在 iframe 内页面 CSS 中设body { overflow: hidden; } - 想自适应高度？纯前端无法可靠获取跨域 iframe 内容高度；同源下可用
iframe.contentDocument.body.scrollHeight动态调整，但需监听load事件并防抖
iframe 加载失败时怎么提示用户
网络中断、目标页 404、CSP 拦截都会导致 iframe 显示为空白，用户不知道发生了什么。
实操建议：
- 用
onerror事件捕获加载失败：<iframe src="..." onerror="this.src='fallback.html'"></iframe>（注意：该事件对跨域错误不触发） - 更可靠的方式是设一个定时器，在
load事件未 5 秒内触发时认为失败，然后替换为提示文案或重试按钮 - 不要依赖
<iframe>...</iframe>中间的文字，它只在 iframe 标签不被支持时显示（现在基本不存在）
移动端 iframe 怎么避免缩放和横向滚动
手机上 iframe 默认不随 viewport 缩放，常出现横向滚动条或内容被压缩变形。
实操建议：
- 给 iframe 外层包一层
<div style="overflow-x: hidden;">，强制裁剪横向溢出 <li>目标页本身需适配移动端：确保其 <code><meta name="viewport">设置正确，否则 iframe 内页面会以桌面宽度渲染 - 避免设固定像素宽高，改用
width="100%"+height="300px"（或用 vh 单位），并加style="min-width: 100%; box-sizing: border-box;"
真正麻烦的从来不是 iframe 标签怎么写，而是你无法控制它里面那个页面的响应头、viewport、JS 行为和资源加载状态。跨域场景下，它本质上是个黑盒窗口——你能做的只是打开它，但看不到里面是否卡死、是否报错、是否偷偷执行了跳转。
