【iframe写法有哪些】在网页开发中，`<iframe>` 是一种非常常见的标签，用于在当前页面中嵌入其他网页或资源。它能够实现跨域内容的展示，提升用户体验。不同的使用场景下，`iframe` 的写法也有所不同。本文将总结几种常见的 `iframe` 写法，并以表格形式进行对比。
一、基本写法
这是最基础的 `iframe` 使用方式，直接通过 `src` 属性引入外部网页。
```html
<iframe src="https://www.example.com" width="600" height="400"></iframe>
```
| 属性 | 说明 |
| `src` | 指定要加载的网页地址 |
| `width` | 设置 iframe 宽度 |
| `height` | 设置 iframe 高度 |
二、设置边框与滚动条
默认情况下，`iframe` 会显示边框和滚动条。可以通过 `frameborder` 和 `scrolling` 属性来控制。
```html
<iframe src="https://www.example.com" width="600" height="400" frameborder="0" scrolling="auto"></iframe>
```
| 属性 | 说明 |
| `frameborder` | 控制边框是否显示（`0` 表示无边框） |
| `scrolling` | 控制是否出现滚动条（`auto`、`yes`、`no`） |
三、设置安全属性（如 `allow`）
随着浏览器对安全性的重视，`iframe` 的一些属性被限制，比如 `allowfullscreen` 或 `allow` 属性可以控制嵌入内容的权限。
```html
<iframe src="https://www.example.com" allow="fullscreen" width="600" height="400"></iframe>
```
| 属性 | 说明 |
| `allow` | 设置嵌入内容的权限（如 `fullscreen`、`camera` 等） |
| `allowfullscreen` | 允许全屏显示（部分浏览器已弃用） |
四、动态加载内容（JavaScript 控制）
除了静态写法，也可以通过 JavaScript 动态修改 `iframe` 的内容。
```html
<iframe id="myIframe" width="600" height="400"></iframe>
<script>
document.getElementById("myIframe").src = "https://www.example.com";
</script>
```
| 方法 | 说明 |
| `document.getElementById().src` | 动态设置 iframe 的源地址 |
| `contentDocument` | 获取 iframe 内部文档对象（需注意跨域限制） |
五、响应式设计（自适应宽度）
为了适配不同屏幕，可以使用 CSS 让 `iframe` 自适应宽度。
```html
<iframe src="https://www.example.com" style="width:100%; height:400px;"></iframe>
```
| 技术 | 说明 |
| `width:100%` | 使 iframe 宽度自适应父容器 |
| `height` | 可固定或使用百分比（需父容器有明确高度） |
六、跨域问题与 `allow-same-origin`
当嵌入的页面与当前页面不在同一域名时，可能会遇到跨域限制。可以通过 `allow-same-origin` 来允许同源访问。
```html
<iframe src="https://www.example.com" allow="same-origin" width="600" height="400"></iframe>
```
| 属性 | 说明 |
| `allow-same-origin` | 允许 iframe 内容与主页面同源 |
总结表格
| 写法类型 | 示例代码 | 说明 |
| 基本写法 | `<iframe src="url" width="600" height="400"></iframe>` | 最基础的嵌入方式 |
| 边框与滚动 | `<iframe src="url" frameborder="0" scrolling="auto"></iframe>` | 控制边框和滚动条 |
| 安全属性 | `<iframe src="url" allow="fullscreen"></iframe>` | 设置嵌入内容权限 |
| 动态加载 | `<iframe id="myIframe"></iframe><script>...</script>` | 通过 JS 控制加载内容 |
| 响应式设计 | `<iframe style="width:100%; height:400px;"></iframe>` | 适配不同设备 |
| 跨域设置 | `<iframe src="url" allow="same-origin"></iframe>` | 解决跨域访问问题 |
以上就是目前常见的 `iframe` 写法总结。根据实际需求选择合适的写法，可以更好地提升网页功能与用户体验。
