HTML <iframe>标签
HTML <iframe>标签作用
HTML <iframe>标签用于显示嵌套的网页（网页内的网页）。 HTML <iframe>标签定义了一个内联框架，因此也称为内联框架。
HTML <iframe>标签在矩形区域内将另一个文档嵌入当前HTML文档中。
网页内容和iframe内容可以使用JavaScript进行交互。
<iframe>标签语法
用<iframe>代码示例:
<iframe src="URL"></iframe>
在这里，"src"属性指定嵌入式框架页面的网址（URL）。
设置iframe的宽度和高度
您可以使用"宽度"和"高度"属性设置iframe的宽度和高度。默认情况下，属性值以像素为单位指定，但您也可以百分比设置。即50％，60％等。
示例:（像素）
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes 示例</h2>
<p>使用height和width属性指定iframe的大小:</p>
<iframe src="https://www.lidihuo.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.lidihuo.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.lidihuo.com" style="height:300px;width:400px"></iframe>
</body>
</html>
删除iframe的边框
默认情况下，iframe周围包含边框。您可以使用<style>属性和CSS border属性删除边框。
示例:
<!DOCTYPE html>
<html>
<body>
<h2>
Remove the Iframe Border</h2>
<p>
This iframe example doesn't have any border</p>
<iframe src="https://www.lidihuo.com/"style="border:none;">
</iframe>
</body>
</html>
您还可以更改iframe边框的大小，颜色，样式。
示例:
<!DOCTYPE html>
<html>
<body>
<h2>
Custom Iframe Border</h2>
<iframe src="https://www.lidihuo.com/" style="border:2px solid tomato;">
</iframe>
</body>
</html>
链接的iframe目标
您可以使用iframe设置链接的目标框架。您为链接指定的目标属性必须引用iframe的名称属性。
示例:
<!DOCTYPE html>
<html>
<body>
<h2>
Iframe - Target for a Link</h2>
<iframe height="300px"width="100%"src="new.html"name="iframe_a">
</iframe>
<p>
<a href="https://www.lidihuo.com"target="iframe_a">
lidihuo.com</a>
</p>
<p>
iframe的名称和链接目标必须具有相同的值， 否则 链接将不会作为框架打开。 </p>
</body>
</html>
输出
new.hmtl输出代码:
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-size: 50px;
color: red;
}
</style>
</head>
<body style="background-color: #c7f15e;">
<p>这是ifarme下方的链接，单击链接可打开新的iframe。</p>
</body>
</html>
使用iframe嵌入YouTube视频
您还可以使用<iframe>标签将YouTube视频添加到您的网页上。随附的视频将在您的网页上播放，您还可以设置视频的高度，宽度，自动播放以及更多属性。
以下是在您的网页上添加YouTube视频的一些步骤:
转到您要嵌入的YouTube视频。
单击视频下方的SHARE SHA。
点击嵌入<>选项。
复制HTML代码。
将代码粘贴到HTML文件中
更改高度，宽度和其他属性（根据要求）。
示例:
<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 |
Pixels |
它定义了嵌入式iframe的高度，默认高度为150像素。 |
| name |
text |
它将名称赋予iframe。如果要在一帧中创建链接，则name属性很重要。 |
| frameborder |
1或0 |
它定义iframe是否应该有边框。 （HTML5不支持）。 |
| Width |
Pixels |
它定义嵌入框架的宽度，默认宽度为300像素。 |
| src |
URL |
src属性用于给路径名或文件名提供要加载到iframe中的内容。 |
| sandbox |
|
此属性用于对框架的内容施加额外的限制 |
| allow-forms |
如果不使用此关键字，则可以提交表单，然后阻止表单提交。 |
| allow-popups |
它将启用弹出窗口，如果不应用，则不会打开任何弹出窗口。 |
| allow-scripts |
它将使脚本能够运行。 |
| allow-same-origin |
如果使用此关键字，则将嵌入式资源视为从同一资源下载的。 |
| srcdoc |
|
srcdoc属性用于在嵌入式iframe中显示HTML内容。它会覆盖src属性（如果浏览器支持）。 |
| scrolling |
|
它指示浏览器是否应为iframe提供滚动条。 （HTML5不支持） |
| auto |
滚动条仅显示iframe的内容是否大于其尺寸。 |
| yes |
始终显示iframe的滚动条。 |
| no |
从不显示iframe的滚动条。 |
