Html 简明教程

HTML - Iframes

  • iframe 是一个内联框架，它使我们能够在当前 HTML 文档中嵌入另一文档。在 HTML 中，内联框架由 * <iframe>* ** 标签定义。此标签会在 HTML 文档中指定的位置创建一个矩形区域，浏览器可以在其中显示外部文档，例如地图或另一个网页。

Syntax

<iframe src="url" title="description"></iframe>

外部文档的 URL 或路径使用 * <iframe>* 标签的 * src* 属性附加。如果 iframe 的内容超过指定的矩形区域，HTML 会自动包括滚动条。HTML 允许任意数量的 iframe，但它可能会影响网站的性能。始终为 <iframe> 包含一个标题属性，此属性将帮助屏幕阅读器朗读 iframe 中提供的内容。

Examples of HTML iframes

下方的示例将说明 iframe 的用法，我们包含了多个示例以阐明 iframe 的使用案例，其中包括您可以使用它的位置、时间和方式。

Creating an iframe

使用 <iframe> 在 HTML 中嵌入另一个文档时，内联 iframe 就可以派上用场。以下示例展示了如何在 HTML 中使用 <iframe>。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <p>It is an example of HTML Iframe</p>
   <iframe src="/index.htm">
      Sorry your browser does not support inline frames.
   </iframe>
</body>
</html>

Setting Height and Width of Iframes

要设置 HTML Iframe 的高度和宽度（尺寸），可以使用 <iframe> 标签的高度和宽度属性。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <p>Setting Height and width of HTML Iframe </p>
   <iframe src="/index.htm" width="500" height="300">
      Sorry your browser does not support inline frames.
   </iframe>
</body>
</html>

Removing border of Iframes

默认情况下，iframe 会在其内携带边框样式，因此我们可以使用 * CSS border Property* 删除该边框。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <p>Removing border of Iframes</p>
   <iframe src="/index.htm" width="500" height="300" style="border:none;">
      Sorry your browser does not support inline frames.
   </iframe>
</body>
</html>

Iframe for a Hyperlink

要为超链接创建目标 Iframe，可以使用 <iframe> 标签的 * name* 属性。此属性的值用于 * target* 元素（如 * <form>* 和 * <a>* ）的属性中，以指定目标框架。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <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>