HTML的iframe(内联框架)用于在当前HTML文档中嵌入另一个网页。iframe是一个矩形区域,用于显示另一个文档的内容。

网页内容和iframe可以通过JavaScript进行交互。

语法

使用<iframe>标签定义HTML的iframe:

<iframe src="URL"></iframe>

在这里,src属性指定了嵌入框架页面的网址(URL)。

设置iframe的宽度和高度

您可以使用widthheight属性来设置iframe的宽度和高度。默认情况下,这些属性的值以像素为单位,但也可以以百分比形式设置,例如50%,60%等。

示例(像素)

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes示例</h2>
<p>使用`height`和`width`属性来指定iframe的大小:</p>
<iframe src="https://www.javatpoint.com/" height="300" width="400"></iframe>
</body>
</html>

示例(百分比)

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>您可以使用`height`和`width`属性来指定iframe的大小:</p>
<iframe src="https://www.javatpoint.com/" height="50%" width="70%"></iframe>
</body>
</html>

您还可以使用CSS来设置iframe的高度和宽度。

示例

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>使用CSS的`height`和`width`属性来指定iframe的大小:</p>
<iframe src="https://www.javatpoint.com/" style="height:300px;width:400px"></iframe>
</body>
</html>

去除iframe的边框

默认情况下,iframe周围有一个边框。您可以使用style属性和CSS的border属性来去除边框。

示例

<!DOCTYPE html>
<html>
<body>
<h2>去除iframe的边框</h2>
<p>这个示例的iframe没有任何边框</p>
<iframe src="https://www.javatpoint.com/" style="border:none;"></iframe>
</body>
</html>

您还可以更改iframe的边框大小、颜色和样式。

示例

<!DOCTYPE html>
<html>
<body>
<h2>自定义iframe的边框</h2>
<iframe src="https://www.javatpoint.com/" style="border:2px solid tomato;"></iframe>
</body>
</html>

链接的iframe目标

您可以使用iframe为链接设置目标框架。链接的target属性必须引用iframe的name属性。

示例

<!DOCTYPE html>
<html>
<body>
<h2>Iframe - 链接的目标框架</h2>
<iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>
<p><a href="http://www.javatiku.cn" target="iframe_a">JavaTpoint.com</a></p>
<p>iframe的名称和链接的目标必须具有相同的值,否则链接将无法在框架中打开。</p>
</body>
</html>

使用iframe嵌入YouTube视频

您还可以使用<iframe>标签在网页上添加YouTube视频。附加的视频将在网页上播放,并且您可以设置高度、宽度、自动播放等视频属性。

以下是在网页上添加YouTube视频的步骤:

  1. 打开您想要嵌入的YouTube视频。
  2. 点击视频下方的"分享(Share)"按钮。
  3. 点击"嵌入(Embed)"选项。
  4. 复制HTML代码。
  5. 将代码粘贴到您的HTML文件中。
  6. 根据需要更改高度、宽度和其他属性。

示例

<iframe width="550" height="315" src="https://www.youtube.com/embed/JHq3pL4cdy4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="padding:20px;"></iframe>
<iframe width="550" height="315" src="https://www.youtube.com/embed/O5hShUO6wxs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" style="padding:20px;"></iframe>

<iframe>的属性

属性名描述
allowfullscreen 如果为true,则可以在全屏模式下打开该框架。
height像素定义嵌入的iframe的高度,默认高度为150像素。
name文本给iframe指定一个名称。如果要在一个框架中创建链接,则name属性非常重要。
frameborder1或0定义是否为iframe添加边框(在HTML5中不支持)。
width像素定义嵌入框架的宽度,默认宽度为300像素。
srcURLsrc属性用于指定要加载到iframe中的路径名或文件名。
sandbox
此属性用于对框架内容应用额外的限制。
allow-forms如果不使用此关键字,则阻止表单提交。
allow-popups启用弹出窗口,如果不应用此关键字,则不会打开任何弹出窗口。
allow-scripts启用脚本运行。
allow-same-origin如果使用此关键字,则嵌入的资源将被视为从相同来源下载的。
srcdocHTML代码此属性用于内联框架,其中指定了嵌入的HTML代码。
loading"lazy"、"eager" 或 "auto"此属性用于指定框架的加载方式。
referrerpolicy例如:"no-referrer"、"origin"、"unsafe-url"等此属性用于指定框架在获取其他资源时使用的引用策略。
title文本此属性用于为iframe提供标题。
align"left"、"right"、"top"、"middle"、"bottom"等此属性用于在嵌入框架周围指定对齐方式。

请注意,某些属性可能在特定的HTML版本或浏览器中不受支持。在使用这些属性之前,请确保检查其兼容性。

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想