HTML iframe用法 htmliframe|HTML5

本文概述

设置iframe的宽度和高度
移除iframe的边框
链接的iframe目标
使用iframe嵌入YouTube视频
< iframe> 的属性

HTML Iframe用于显示嵌套的网页（网页内的网页）。 HTML < iframe> 标记定义了嵌入式框架, 因此也称为嵌入式框架。
HTML iframe在矩形区域的当前HTML文档中嵌入了另一个文档。
【HTML iframe用法】网页内容和iframe内容可以使用JavaScript进行交互。
iframe语法
HTML iframe是通过< iframe> 标记定义的：

< iframe src="http://img.readke.com/220424/14492a263-0.jpg"> < /iframe>

在此, “ src”属性指定嵌入式框架页面的网址（URL）。
设置iframe的宽度和高度你可以使用“宽度”和“高度”属性来设置iframe的宽度和高度。默认情况下, 属性值以像素为单位指定, 但你也可以百分比设置。即50％, 60％等。
示例：（像素）

< !DOCTYPE html> < html> < body> < h2> HTML Iframes example< /h2> < p> Use the height and width attributes to specify the size of the iframe:< /p> < iframe src="https://www.srcmini.com/" height="300" width="400"> < /iframe> < /body> < /html>

立即测试
示例：（百分比）

< !DOCTYPE html> < html> < body> < h2> HTML Iframes< /h2> < p> You can use the height and width attributes to specify the size of the iframe:< /p> < iframe src="https://www.srcmini.com/" height="50%" width="70%"> < /iframe> < /body> < /html>

立即测试
你还可以使用CSS设置iframe的高度和宽度。
例：

< !DOCTYPE html> < html> < body> < h2> HTML Iframes< /h2> < p> Use the CSS height and width properties to specify the size of the iframe:< /p> < iframe src="https://www.srcmini.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.srcmini.com/" style="border:none; "> < /iframe> < /body> < /html>

立即测试
你还可以更改iframe边框的大小, 颜色, 样式。
例：

< !DOCTYPE html> < html> < body> < h2> Custom Iframe Border< /h2> < iframe src="https://www.srcmini.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="http://www.srcmini.com/new.html" name="iframe_a"> < /iframe> < p> < a href="https://www.srcmini.com" target="iframe_a"> srcmini.com< /a> < /p> < p> The name of iframe and link target must have same value else link will not open as a frame. < /p> < /body> < /html>

立即测试
输出量

文章图片
new.hmtl输出代码：

< !DOCTYPE html> < html> < head> < style> p{ font-size: 50px; color: red; }< /style> < /head> < body style="background-color: #c7f15e; "> < p> This is a linkbelow the ifarme click on link to open new 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 px。
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的滚动条。