iframe的src属性必须为合法URL，否则默认加载about:blank导致空白且无法访问contentDocument；需避免src=""或缺失，推荐使用相对/绝对路径或data URL验证渲染。
iframe 的 src 属性必须存在，否则加载空白或 about:blank
不填 src 的 <iframe> 不会报错，但多数浏览器会默认加载 about:blank，表现为一片空白区域，且无法通过 JS 访问其 contentDocument（跨域或空文档都会触发拒绝访问错误）。
真实项目中常见误写成 src="" 或漏写，结果页面“看起来没加载”，其实是静默失败。
正确做法：
-
src必须是合法 URL，支持相对路径（如src="page.html"）、绝对路径（src="/assets/embed.html"）或完整协议地址（src="https://example.com"） - 开发阶段可临时用
src="data:text/html,<h1>test</h1>"快速验证 iframe 渲染是否正常 - 若需延迟加载，用
loading="lazy"，但注意：隐藏的容器（display: none或visibility: hidden）中，loading="lazy"会被忽略，直接 eager 加载
width 和 height 设置不当会导致布局断裂或滚动条失控
百分比值依赖父容器有明确尺寸。比如 width="100%" 在父元素 width: auto（如未设宽的 <div>）下可能失效，实际宽度为 300px（浏览器默认最小宽度）；height="100%" 更容易出问题——父容器必须有显式高度（如 height: 500px 或 height: 100vh），否则高度塌陷为 0。
推荐组合：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 响应式场景：用 CSS 控制尺寸更可靠，例如
<iframe style="width: 100%; height: 400px;">，避免内联width/height属性被 CSS 覆盖 - 全屏嵌入：配合
position: absolute+top/left/bottom/right: 0，再加border: none消除默认边框干扰 - 避免
scrolling="no"（已废弃），改用 CSSoverflow: hidden控制滚动行为
sandbox 属性不设值等于完全锁死，设错值等于白设
sandbox 默认启用全部限制（脚本禁用、表单禁用、插件禁用等），即空属性 sandbox 等价于 sandbox=""。这意味着嵌入页连 console.log 都执行不了，JS 全部静默失效，连 document.write 都抛错。
常用放行组合：
- 允许脚本和表单：
sandbox="allow-scripts allow-forms" - 允许全屏（需配合
allowfullscreen）：sandbox="allow-scripts allow-fullscreen" - 注意顺序无关，但每个权限必须显式写出；
allow-same-origin是高危项，仅在同源嵌入时使用，否则会绕过同源策略 - 第三方内容（如广告、地图）务必省略
allow-same-origin，否则可能被利用进行 XSS
title 属性不是可选装饰，而是无障碍刚需
WCAG 2.1 要求所有 <iframe> 必须含 title，否则屏幕阅读器无法告知用户该区域用途。缺失 title 不影响功能，但会使网页无法通过基础无障碍审计。
写法要点：
- 描述性而非泛泛而谈，比如
title="百度地图嵌入组件"比title="地图"更好 - 避免与
aria-label冗余重复，优先用title（原生语义更稳定） - 动态生成 iframe 时，务必同步设置
title，别只靠 JS 注入 DOM 后再补 —— 辅助技术可能已读取完毕
sandbox 和 title 的组合效应：一个没设权限导致功能瘫痪，一个没设文字导致合规风险，两者都看似“不影响显示”，却在交付验收或上线后突然暴露。 
