<iframe> (内联框架) 是 HTML 中用于在当前文档中嵌入另一个文档的元素。以下是 <iframe> 支持的所有属性及其详细说明：
核心属性
src (必需)
指定要嵌入的文档的 URL
示例：src="https://example.com"
srcdoc
直接嵌入 HTML 内容而不是外部 URL
示例：srcdoc="<p>Hello World</p>"
name
为 iframe 指定名称，可用于链接的 target 属性
示例：name="myFrame"
width
设置 iframe 的宽度(像素或百分比)
示例：width="600" 或 width="100%"
height
设置 iframe 的高度(像素或百分比)
示例：height="400"
安全与限制属性
sandbox
对 iframe 内容施加额外限制
可选值：""(所有限制)、allow-forms、allow-scripts、allow-same-origin、allow-popups、allow-top-navigation等
示例：sandbox="allow-scripts allow-forms"
allow
指定 iframe 可用的功能策略
示例：allow="fullscreen; geolocation; microphone"
allowfullscreen
是否允许全屏模式
布尔属性，无需值
示例：allowfullscreen
allowpaymentrequest
是否允许支付请求 API
布尔属性
示例：allowpaymentrequest
referrerpolicy
控制发送的 Referer HTTP 头
可选值：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、same-origin、strict-origin、strict-origin-when-cross-origin、unsafe-url
示例：referrerpolicy="no-referrer"
性能与加载属性
loading
控制 iframe 的懒加载行为
可选值：eager(立即加载)、lazy(延迟加载)
示例：loading="lazy"
importance
指示资源的相对重要性
可选值：auto、high、low
示例：importance="high"
其他属性
frameborder
是否显示边框(已废弃，建议使用 CSS)
示例：frameborder="0"(无边框)
scrolling
是否显示滚动条(已废弃，建议使用 CSS)
可选值：auto、yes、no
示例：scrolling="no"
marginwidth
设置内容与边框的水平边距(已废弃)
示例：marginwidth="10"
marginheight
设置内容与边框的垂直边距(已废弃)
示例：marginheight="10"
align
对齐方式(已废弃，建议使用 CSS)
示例：align="center"
无障碍属性
title
提供 iframe 内容的描述(重要无障碍属性)
示例：title="嵌入式地图"
现代浏览器新增属性
csp
为嵌入内容指定内容安全策略
示例：csp="script-src 'none'"
credentialless
以无凭证模式加载 iframe(防止信息泄漏)
布尔属性
示例：credentialless
完整示例
<iframe
src="https://example.com"
srcdoc="<p>备用内容</p>"
name="contentFrame"
width="800"
height="600"
sandbox="allow-scripts allow-same-origin"
allow="fullscreen; geolocation"
allowfullscreen
loading="lazy"
importance="high"
referrerpolicy="strict-origin-when-cross-origin"
title="示例网站嵌入"
frameborder="0"
scrolling="auto"
csp="script-src 'self'"
credentialless
></iframe>为什么需要慎用 iframe？
iframe（内联框架）虽然功能强大，但在实际开发中需要谨慎使用，主要基于以下几个方面的考虑：
- 性能问题
页面加载速度：每个 iframe 都会创建独立的文档环境，增加内存和 CPU 开销
资源竞争：多个 iframe 会竞争网络带宽，导致主页面加载变慢
渲染阻塞：某些浏览器会等待 iframe 加载完成才触发页面 load 事件
- 安全问题
XSS 攻击风险：恶意 iframe 内容可能执行跨站脚本攻击
点击劫持：攻击者可能通过透明 iframe 覆盖在正常按钮上进行欺骗点击
隐私泄露：第三方 iframe 可能跟踪用户行为，收集敏感信息
- SEO 影响
搜索引擎爬取困难：大多数搜索引擎不会索引 iframe 中的内容
权重分散：iframe 内容通常不会被计入主页面 SEO 价值
结构化数据问题：Schema.org 标记在 iframe 中可能无效
- 用户体验问题
响应式设计挑战：iframe 内容难以自适应不同屏幕尺寸
滚动冲突：内部滚动条与页面滚动条可能产生冲突
导航混乱：用户可能不清楚自己是在主页面还是 iframe 中操作
- 技术限制
跨域限制：同源策略会阻止 iframe 与父页面间的 JavaScript 通信
Cookie 限制：现代浏览器对第三方 Cookie 的限制影响 iframe 功能
功能限制：许多 API（如全屏、支付等）在 iframe 中有额外限制
- 维护困难
调试复杂：iframe 内的错误难以追踪和调试
样式隔离：iframe 内容不受外部 CSS 影响，难以保持设计一致性
版本控制：第三方 iframe 内容可能随时变更，影响业务逻辑
