Html 简明教程

HTML - Iframes

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

An iframe is an inline frame that allows us to embed another document within the current HTML document. In HTML, the inline frame is defined with the <iframe> tag. This tag creates a rectangular region at specified place within the HTML document in which the browser can display an external document such as a map or another web page.

Syntax

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

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

URL or path of the external document is attached using the src attribute of <iframe> tag. If the content of iframe exceeds the specified rectangular region, HTML automatically includes the scrollbars. HTML allows any number of iframes, but, it may affect the performance of the website. Always include a title attribute for the <iframe> that wwill help screen readers to read out what is the content provided in the iframe.

Examples of HTML iframes

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

Bellow exammples will illsutarte the usage of iframes, we have covered multiple examples to clarify the use cases of iframes where, when and how you can use it.

Creating an iframe

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

An inline iframe is used to embed an another document inside the current html document. Following is the example to show how to use the <iframe> in HTML.

<!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> 标签的高度和宽度属性。

To set height and width (dimension) of an HTML Iframe, we use the height and width attribute of <iframe> tag.

<!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* 删除该边框。

By default iframes carry border style within it, so we can remove that border using 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>* ）的属性中，以指定目标框架。

To create a target Iframe for a hyperlink, we use the name attribute of <iframe> tag. The value of this attribute is used in the target attribute of elements like <form> and <a> to specify the target frame.

<!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>