### 什么是 `<
iframe>`
标签？
`<
iframe>` 是
HTML 中的一个
标签，用于在当前
HTML 文档中嵌入另一个
HTML 页面或外部资源，例如网页、视频、地图或 PDF 文档。通过 `<
iframe>` 可以实现页面内容的嵌套展示，而不影响主页面的结构和功能。
### `<
iframe>` 的基本用法
最基本的 `<
iframe>` 使用方式如下：
```
html
<
iframe src="https://example.com" width="800" height="600" title="示例网站"></
iframe>
```
该代码会嵌入一个指定 URL 的网页，并设置其宽度、高度和标题。
### 响应式 `<
iframe>` 实现
为了适应不同设备的屏幕尺寸，可以使用响应式设计方式嵌入 `<
iframe>`，例如使用 `position: absolute` 和外层容器控制比例：
```
html
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<
iframe src="https://www.youtube.com/embed/VIDEO_ID"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</
iframe>
</div>
```
此方法通过设置容器的 `padding-bottom` 来控制宽高比（如 16:9），并让 `<
iframe>` 自适应容器大小[^2]。
### `<
iframe>` 的常用属性
- `src`：指定要嵌入的页面或资源的 URL。
- `width` / `height`：设置 `<
iframe>` 的宽度和高度。
- `title`：为 `<
iframe>` 添加描述性标题，增强可访问性。
- `frameborder`：控制是否显示边框（
HTML5 中已被 `style` 替代）。
- `allowfullscreen`：允许 `<
iframe>` 全屏显示。
- `allow`：指定允许 `<
iframe>` 执行的功能，如 `autoplay`、`fullscreen`、`geolocation` 等[^2]。
### `<
iframe>` 的安全注意事项
在使用 `<
iframe>` 时，需要注意潜在的安全问题，例如点击劫持（Clickjacking）和跨域嵌套问题。可以通过以下方式增强安全性：
- 使用 `sandbox` 属性限制 `<
iframe>` 的权限：
```
html
<
iframe src="https://example.com" sandbox></
iframe>
```
- 防止网页被嵌套（防嵌套网页）：
- **浏览器端**：通过 `X-Frame-Options` HTTP 响应头控制页面是否允许被嵌套。
- **服务器端**：配置服务器返回 `X-Frame-Options: DENY` 或 `X-Frame-Options: SAMEORIGIN` 来阻止跨域嵌套[^1]。
### `<
iframe>` 的使用场景
- 嵌入外部网页或文档（如 PDF、地图、视频等）。
- 实现页面内容的模块化加载。
- 在 Web 应用中实现沙盒环境。
- 跨域通信（通过 `postMessage` API 实现
iframe 之间的通信）[^1]。
### `<
iframe>` 对象及属性操作
在 JavaScript 中可以通过 `window.frames` 或直接访问 DOM 元素来操作 `<
iframe>`。例如：
```javascript
const
iframe = document.getElementById('my
Iframe');
iframe.contentWindow.postMessage('Hello from parent', '*');
```
此代码通过 `postMessage` 方法向 `<
iframe>` 发送消息，适用于跨域通信场景。
---
### 相关问题
1. 如何在
HTML 中实现 `<
iframe>` 的跨域通信？
2. 如何在网页中嵌入 PDF 文件并实现自适应布局？
3. 如何防止网页被其他网站通过 `<
iframe>` 嵌套？
4. 如何在 `<
iframe>` 中启用全屏功能？
5. 如何通过 `sandbox` 属性提升 `<
iframe>` 的安全性？
超级会员免费看
本文介绍了HTML中的<iframe>标签，用于创建内联框架，显示其他文档。该标签在所有浏览器中都得到支持，但在HTML 4.1 Strict DTD和XHTML 1.0 Strict DTD中不被允许。为兼容性考虑，可以将内容直接放在标签内。
订阅专栏 解锁全文
扫一扫
840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
