css iframe标签使用

<iframe> 标签用于在网页中嵌入另一个 HTML 页面。它非常灵活，可用于嵌入内容，比如其他网站、视频、地图等。以下是有关 <iframe> 的详细介绍及使用方法：

基本语法

<iframe src="URL" width="宽度" height="高度"></iframe>

常见属性

src：
- 指定嵌入的页面 URL。
- 示例：src="https://example.com"
width 和 height：
- 设置 iframe 的宽度和高度（可以是像素值或百分比）。
- 示例：width="600" height="400"
frameborder（已废弃，建议用 CSS）：
- 定义是否显示边框（0 表示无边框，1 表示有边框）。
allowfullscreen：
- 允许全屏显示（多用于视频）。
- 示例：allowfullscreen="true"
name：
- 设置 iframe 的名字，用于目标链接的跳转。
sandbox：
- 提供安全性选项，可以限制嵌入内容的功能。
- 示例：sandbox="allow-scripts allow-same-origin"
loading：
- 延迟加载 iframe 内容，提升性能。
- 值：lazy（延迟加载），eager（默认加载）。

简单例子

1. 嵌入一个网页

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

2. 嵌入无边框的内容

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

3. 使用 `sandbox` 属性增强安全性

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

4. 嵌入 YouTube 视频

<iframe width="560" height="315" src="https://www.youtube.com/embed/视频ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

注意事项

跨域限制：
- 某些网站（如 Google）对 iframe 有防嵌套策略（X-Frame-Options），会阻止嵌入。
- 如果无法加载，通常是目标网站限制了跨域访问。
样式优化：
- 使用 CSS 可以更好地控制 iframe 的外观。
```
iframe {border: none;display: block;margin: 0 auto;
}
```
安全性：
- 小心嵌入的内容可能包含恶意代码。
- 建议使用 sandbox 和限制性权限。

高级功能

动态设置 iframe 的内容

可以通过 JavaScript 修改 iframe 的 src 或直接写入内容：

<iframe id="myIframe" width="800" height="600"></iframe><script>// 动态设置 iframe 的 URLdocument.getElementById("myIframe").src = "https://www.example.com";// 动态写入内容const iframe = document.getElementById("myIframe");iframe.contentDocument.write("<h1>Hello, World!</h1>");
</script>