iframe src必须是合法可加载地址，否则白屏且无提示；浏览器校验极严，空字符串、javascript:void(0)、file://路径、相对路径错位均导致空白；本地开发须起HTTP服务，生产环境推荐绝对路径；动态赋值前需校验协议；未设宽高或在Flex/Grid中易塌陷消失。
iframe src 必须是合法可加载地址，否则白屏且无提示
浏览器对 src 值校验极严：空字符串、javascript:void(0)、file:// 路径、相对路径错位（如父页在 /admin/ 下却写 src="index.html"），都会导致 iframe 显示空白，控制台只报 net::ERR_FILE_NOT_FOUND 或 404，不抛 JS 异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 本地开发务必起 HTTP 服务（如
python3 -m http.server 8000），用http://localhost:8000/page.html测试 - 生产环境优先用绝对路径：
src="/embed/widget.html"，避免因 URL 重写或路由跳转导致路径失效 - 动态赋值前做协议检查：
if (url && (url.startsWith('http') || url.startsWith('/'))) iframe.src = url;
不设宽高或未清除默认边框，iframe 就看不见
iframe 是替换型内联元素，**默认尺寸 300×150px**，且自带 border 和滚动条。若父容器是 flex 或 grid，又没给 iframe 设 width: 100%，它会收缩到 0 宽度——页面上只剩一条细线甚至完全不可见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 至少显式设置样式：
<iframe style="width: 100%; height: 400px; border: none;"></iframe> - 响应式场景下用
aspect-ratio配合width: 100%控制比例，例如：style="width: 100%; aspect-ratio: 16/9; height: auto;" -
scrolling属性已废弃，改用父容器 CSS：overflow: hidden或overflow: auto
X-Frame-Options 和 frame-ancestors 必须服务端配置，前端 JS 无效
想阻止别人把你的页面嵌进他们的 iframe，唯一可靠方式是服务端返回 HTTP 头：X-Frame-Options: DENY 或 Content-Security-Policy: frame-ancestors 'none'。前端 JS 检测 window.top !== window.self 只能跳转，不能阻止加载——页面早已被拉取、HTML 已暴露。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Nginx 加这行：
add_header X-Frame-Options "DENY" always; - Apache 加这行：
Header always set X-Frame-Options "DENY" - 现代浏览器推荐同时配 CSP：
Content-Security-Policy: frame-ancestors 'none';，IE 等老浏览器 fallback 到X-Frame-Options - 不要用
<meta>标签设frame-ancestors——它被所有浏览器忽略
sandbox 属性不设具体权限，等于没开沙箱
sandbox 是 iframe 最关键的安全开关，但直接写 sandbox（无值）会禁掉脚本、表单、弹窗等全部能力，多数第三方页面直接崩；而写成 sandbox="allow-scripts" 却漏了 allow-same-origin，跨域下 postMessage 仍无法通信。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 最小权限原则：只开必需项，例如嵌 YouTube 视频用
sandbox="allow-scripts allow-same-origin allow-popups allow-fullscreen" - 绝不能写
sandbox="allow-all"（该值不存在，浏览器当空字符串处理，等同于全禁） - 如果目标页面需 DOM 访问或 localStorage，必须加
allow-same-origin，但这会削弱隔离性——仅限同源可信内容 - 搭配
referrerpolicy="no-referrer-when-downgrade"减少敏感 Referer 泄露
iframe 标签，而是判断哪些外部页面值得信任、哪些行为必须隔离、以及服务端头和前端策略如何协同生效。一个没配 sandbox 的第三方嵌入，可能比 XSS 更早泄露用户凭证。 
