<iframe>: 内联框架标签
最后更新：2026-10-13
<iframe>内联框架标签
在当前页面内嵌入另一个网页或资源，形成“画中画”，常用于地图、视频、第三方组件。
| 分类 | 脚本与嵌入 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </iframe> 标签 |
| 状态 | 标准 |
📝 语法
<iframe src="https://example.com"></iframe>⚙️ 属性
该元素支持全局属性及以下专有属性：
| 属性 | 值 | 描述 |
|---|---|---|
src | 要嵌入的页面地址。 | |
srcdoc | 直接用 HTML 字符串作为嵌入内容（优先级高于 src）。 | |
width | 嵌入区域的宽度。 | |
height | 嵌入区域的高度。 | |
title | 无障碍标题，描述嵌入内容（必填）。 | |
sandbox | 限制嵌入内容的权限（如 allow-scripts、allow-same-origin）。 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <iframe> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： iframe 要始终加 title 以利无障碍；用 sandbox 可缩小被嵌入内容的安全风险。
❓ 常见问题
Qiframe 会被 SEO 惩罚吗？
Aiframe 内的内容不属于父页面——搜索引擎抓取和排名的是 iframe 的 src 文档本身。少量嵌入（地图、视频）无害；把核心内容塞进 iframe 会让它无法为父页面贡献排名。避免用 iframe 加载主内容。
Qiframe 的 sandbox 属性有什么用？
A
sandbox 给嵌入内容上安全锁：默认禁脚本、禁表单、禁同源访问，可用白名单值逐项放开，如 sandbox='allow-scripts allow-same-origin'。嵌入第三方内容时务必加 sandbox，最小化风险。Qiframe 怎么做响应式 16:9 视频？
A经典外层容器方案：
div { position: relative; padding-top: 56.25%; } 配合 iframe { position: absolute; inset: 0; width: 100%; height: 100%; }。现代浏览器也可用 aspect-ratio: 16/9 直接设在 iframe 上。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
