【iframe写法有哪些】在网页开发中，`<iframe>` 标签是一种非常常见的嵌入式标签，用于在当前页面中显示另一个网页内容。它被广泛应用于展示外部资源、广告、地图、视频等内容。虽然 `<iframe>` 的基本用法相对简单，但根据不同的使用场景和需求，其写法也多种多样。以下是对常见 `iframe` 写法的总结与对比。

一、基本写法

这是最基础的 `iframe` 使用方式，直接通过 `src` 属性引入外部页面。

```html

<iframe src="https://www.example.com" width="600" height="400"></iframe>

```

二、设置边框与滚动条

默认情况下，`iframe` 会带有边框和滚动条。可以通过属性控制这些样式。

```html

<iframe src="https://www.example.com" width="600" height="400" frameborder="0" scrolling="no"></iframe>

```

三、设置标题（title 属性）

虽然不是所有浏览器都支持，但可以给 `iframe` 添加一个标题，提升可访问性。

```html

<iframe src="https://www.example.com" title="示例页面"></iframe>

```

四、响应式布局写法

为了适应不同设备，可以使用 CSS 或者 `allowfullscreen` 属性实现自适应宽度。

```html

<iframe src="https://www.example.com" style="width:100%; height:400px;" allowfullscreen></iframe>

```

五、跨域嵌入（CORS）

如果需要从其他域名加载内容，需要注意跨域问题。通常需要目标网站允许跨域访问。

```html

<iframe src="https://otherdomain.com" allow="camera; microphone"></iframe>

```

六、动态生成 iframe（JavaScript）

有时需要根据用户行为动态生成 iframe，例如点击按钮后加载内容。

```html

<script>

function loadIframe() {

var iframe = document.createElement("iframe");

iframe.src = "https://www.example.com";

iframe.width = "600";

iframe.height = "400";

document.body.appendChild(iframe);

}

</script>

加载iframe

```

七、安全相关属性（如 sandbox）

为了提高安全性，可以使用 `sandbox` 属性限制 iframe 的功能。

```html

<iframe src="https://www.example.com" sandbox="allow-scripts"></iframe>

```

总结表格

以上就是常见的 `iframe` 写法汇总。根据实际项目需求，可以选择合适的写法，既能满足功能要求，也能兼顾性能与安全性。