HTML - Iframes
HTML iframe 是一个内联框架，允许您在当前 HTML 文档中嵌入另一个文档。每当您想在网页中显示另一个网页时，都可以使用 iframe。
创建 iframe（内联框架）
在 HTML 中，内联框架使用 <iframe> 标签定义。该标签在 HTML 文档的指定位置创建一个矩形区域，浏览器可以在其中显示外部文档，例如地图或其他网页。
Iframe 语法
以下是在 HTML 中创建内联框架（iframe）的语法：
<iframe src="url" title="description"></iframe>
src 属性
外部文档的 URL 或路径使用 <iframe> 标签的 src 属性指定。如果 iframe 的内容超出指定的矩形区域，HTML 会自动添加滚动条。HTML 允许使用任意数量的 iframe，但可能会影响网站性能。
Iframe 示例
以下示例演示了如何在 HTML 中创建 iframe：
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>It is an example of HTML Iframe</p>
<iframe src="/html/menu.htm"> Sorry your browser does not support inline frames. </iframe>
</body>
</html>
<iframe> 标签属性
下表描述了与 <iframe> 标签一起使用的属性。
| 序号 | 属性 & 描述 |
|---|---|
| 1 | src 此属性用于指定要在框架中加载的文件名。其值可以是任何 URL。例如，src="/html/top_frame.htm" 将加载 html 目录中的 HTML 文件。 |
| 2 | name 此属性允许为特定框架指定名称。它用于指示文档应加载到哪个框架中。当您想在一个框架中创建链接并将页面加载到另一个框架时，这一点很重要，此时第二个框架需要一个名称来标识自己作为链接的目标。 |
| 3 | height 此属性指定 <iframe> 的高度。默认值为 150 像素。 |
| 4 | width 此属性指定 <iframe> 的宽度。默认值为 300 像素。 |
| 5 | allow 用于指定访问麦克风和摄像头等功能的权限策略。 |
| 6 | loading 指定加载给定 iframe 的时间。 |
设置 Iframe 的高度和宽度
您可以使用 <iframe> 标签的 height 和 width 属性来设置 HTML iframe 的高度和宽度。
示例
以下示例演示了如何设置 iframe 的高度和宽度：
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<h2>Example of Setting Height and width of HTML Iframe</h2>
<iframe src="/index.htm" width="500" height="300">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>
上述代码将在具有指定高度和宽度的 iframe 中显示 "index.htm" 网页。
链接到 Iframe：Target 和 Name 属性
您可以将 iframe 用作目标框架，在点击链接时打开网页。
您可以通过 <iframe> 标签的 name 属性为链接（超链接）创建一个目标 iframe。name 属性的值用于像 <form> 和 <a> 等元素的 target 属性中，以指定目标框架。
示例
以下示例演示了如何为超链接创建一个目标 iframe：
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<h2>Linking to an Iframe: Target and Name Attributes</h2>
<p>Click on the link below to load the content inside the specified frame...</p>
<p><a href="/html/html_iframes.htm" target="Iframe">
Iframe Tutorial
</a>
</p>
<iframe style="background-color: skyblue;" name="Iframe" width="500" height="300">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>
执行上述代码后，将生成一个链接和一个带有天蓝色背景的 Iframe。点击链接时，其内容将在 iframe 内打开。
为 Iframe 添加样式
您还可以使用 style 或 class 属性为 iframe 应用 CSS 规则。
示例
以下示例演示了如何为 iframe 应用 CSS 样式：
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
<style type="text/css">
body{
background-color: #FFF4A3;
}
.my_iframe{
width: 90%;
height: 180px;
border: 2px solid #f40;
padding: 8px;
}
</style>
</head>
<body>
<h2>Example of Styling Iframe</h2>
<iframe src="/index.htm" class="my_iframe">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>
多个 Iframe
您可以在一个网页中嵌入多个文档（网页）。HTML 允许在 HTML 文档中使用多个 <iframe> 标签。
注意： 使用多个 iframe 可能会降低页面加载速度。
示例
在以下示例中，我们使用多个 iframe 嵌入三个网页：
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
<style type="text/css">
body{
background-color: #FFF4A3;
}
.my_iframe{
width: 90%;
height: 180px;
border: 2px solid #f40;
padding: 8px;
margin-bottom: 8px;
}
</style>
</head>
<body>
<h2>Example of Multiple Iframes</h2>
<h3>Index Page</h3>
<iframe src="/index.htm" class="my_iframe">
Sorry your browser does not support inline frames.
</iframe>
<h3>Tutorials Library</h3>
<iframe src="/tutorialslibrary.htm" class="my_iframe">
Sorry your browser does not support inline frames.
</iframe>
<h3>Compilers</h3>
<iframe src="/codingground.htm" class="my_iframe">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>