HTML - 内联框架

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 属性将 CSS 规则应用于 iframe。

示例

以下示例演示了如何将 CSS 样式应用于 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;
      }
    </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>

打印页面