前端三剑客
HTML

HTML 框架

# HTML 框架

HTML 框架（iframe）允许在同一个浏览器窗口中显示多个页面。iframe 语法简单且功能强大，可以嵌入视频、地图或其他网页内容。

# 1. iframe 基本语法

<iframe src="URL"></iframe>

src 属性用于指定要嵌入的页面 URL。

# 2. iframe - 设置高度与宽度

height 和 width 属性用来定义 iframe 标签的高度与宽度。
属性默认以像素为单位，但可以指定其按比例显示（如："80%"）。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

iframe 示例

# 3. iframe - 移除边框

frameborder 属性用于定义 iframe 是否显示边框。
设置属性值为 "0" 可以移除 iframe 的边框。

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

iframe 无边框

# 4. 使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面。
目标链接的 target 属性必须与 iframe 的 name 属性匹配。

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

1
2

iframe 目标链接

# 5. iframe - 样式与属性

iframe 可以通过多种属性进行自定义，以满足各种需求。

# 5.1 `allowfullscreen` 属性

允许 iframe 全屏显示。

<iframe src="demo_iframe.htm" width="560" height="315" allowfullscreen></iframe>

# 5.2 `loading` 属性

控制 iframe 的加载行为：

lazy：懒加载，只有当 iframe 接近可视区域时才加载。
eager：立即加载。

<iframe src="demo_iframe.htm" loading="lazy"></iframe>

# 5.3 `sandbox` 属性

添加额外的安全限制：

allow-forms：允许表单提交。
allow-same-origin：允许与 iframe 同源的内容。
allow-scripts：允许运行脚本。
allow-popups：允许弹出窗口。

<iframe src="demo_iframe.htm" sandbox="allow-scripts allow-same-origin"></iframe>

# 5.4 `referrerpolicy` 属性

控制发送的 Referrer 信息：

no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url

<iframe src="demo_iframe.htm" referrerpolicy="no-referrer"></iframe>

# 6. iframe - 响应式设计

在响应式设计中，iframe 需要根据父容器的尺寸进行调整，可以使用 CSS 进行样式控制。

# 示例：响应式 iframe

<!DOCTYPE html>
<html>
<head>
  <style>
    .responsive-iframe {
      position: relative;
      overflow: hidden;
      padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }
    .responsive-iframe iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  </style>
</head>
<body>

<div class="responsive-iframe">
  <iframe src="demo_iframe.htm"></iframe>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 解释：

.responsive-iframe：使用 padding-top 设置 16:9 的纵横比（56.25%）。
iframe：绝对定位，宽度和高度设置为 100%，使其适应父容器。

# 7. 综合示例

以下示例展示了多个 iframe 特性和样式的综合应用。

<!DOCTYPE html>
<html>
<head>
  <style>
    .iframe-container {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    }
    .iframe-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  </style>
</head>
<body>

<h2>带有边框的 iframe</h2>
<iframe src="demo_iframe.htm" width="300" height="200" style="border:1px solid black;"></iframe>

<h2>移除边框的 iframe</h2>
<iframe src="demo_iframe.htm" width="300" height="200" frameborder="0"></iframe>

<h2>响应式 iframe</h2>
<div class="iframe-container">
  <iframe src="demo_iframe.htm" frameborder="0" allowfullscreen loading="lazy"></iframe>
</div>

<h2>目标链接的 iframe</h2>
<iframe src="demo_iframe.htm" name="iframe_a" width="300" height="200"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

通过这些示例，您可以全面了解 HTML iframe 的使用方法和各种自定义属性。这些知识将帮助您更好地在网页中嵌入和展示其他网页内容。

编辑此页

上次更新: 2025/01/25, 22:32:05

← HTML 表单 HTML 颜色→