HTML - iframe

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

语法


<iframe src="url" title="描述"></iframe>

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

HTML iframe 的示例

下面将介绍iframe的使用，我们介绍了多个示例，以阐明<iframe>的用例，何时以及如何使用它。

创建 iframe

内联 iframe 用于在当前 html 文档中嵌入另一个文档。以下示例演示如何在 HTML 中使用 <iframe>。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML 内嵌框架</title>
</head>
<body>
	 <p>这是HTML Iframe的一个例子</p>
	 <iframe src="/index.htm"> 
			很抱歉，您的浏览器不支持内联框架。
	 </iframe>
</body>
</html>

设置 iframe 的高度和宽度

为了设置 HTML Iframe 的高度和宽度（维度），我们使用 <iframe> 标签的 height 和 width 属性。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML Iframes示例</title>
</head>
<body>
	 <p>设置HTML Iframe的高度和宽度</p>
	 <iframe src="/index.htm" width="500" height="300"> 
			很抱歉，您的浏览器不支持内联框架。
	 </iframe>
</body>
</html>

删除 iframe 的边框

默认情况下，iframe 带有边框样式，因此我们可以使用 CSS border Property 删除该边框。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML Iframes</title>
</head>
<body>
	 <p>移除Iframes的边框</p>
	 <iframe src="/index.htm" width="500" height="300" style="border:none;"> 
			很抱歉，您的浏览器不支持内联框架。 
	 </iframe>
</body>
</html>

用于超链接的 iframe

要为超链接创建目标 Iframe，我们使用 <iframe> 标记的 name 属性。此属性的值用于 <form> 和 <a> 等元素的目标属性中，以指定目标框架。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML Iframes</title>
</head>
<body>
	 <p>
			单击下面的链接加载内容
			在指定的框架内。。。
	 </p>
	 <p>
			<a href="/html/html_iframes.htm" target="Iframe">
				 Iframe 教程
			</a>
	 </p>
	 <iframe style="background-color: skyblue;" name="Iframe" width="500" height="300"> 
			很抱歉，您的浏览器不支持内联框架。 
	 </iframe>
</body>
</html>

打印本页